注意: empty 有空格文本的不算 empty
根据:target 做一个选项卡
:target 应该是根据 哈希值确定的, 哈希值唯一锁定元素.
位置的判断会被其他类型的标签影响.
这个就不会受到其他元素标签的影响.
1
2
3
4
5
div:nth-of-type(2n+1) {
n 从0 开始
但选取元素从1开始
div:nth-of-type(1) 是 第一个元素
}
1
2
3
4
指独生子,不同标签互相影响
div:only-child{}
独生子,不同标签不影响
div:only-of-type{}
表单元素选择器
表单元素: input
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
css
input:enabled{
background-color: #F08080;
}
input:disabled{
background-color: #ccc;
}
input:read-only{
background-color: aqua;
}
html
<input type="text" />
<input type="text" disabled />
<input type="text" readonly />
<script type="text/javascript">
伪元素选择器
1
2
3
4
5
6
7
div{// 用来设置无法选取文本
user-select : none;
}
div::selection{
color: red;
}
伪类和伪元素的区别
伪类是同一个元素,
伪元素是不同的元素.
1
2
这 + ~ 兄弟选择器我竟然用得很少,
但实际上,这个应该很有用,很好用
作业: 简单手风琴效果 html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrapper">
<a href="#demo1">a</a>
<ul id="demo1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a href="#demo2">b</a>
<ul id="demo2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a href="#demo3">c</a>
<ul id="demo3">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrapper{
position: absolute;
width: 250px;
height: 400px;
border: 1px solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.wrapper ul{
display: none;
}
.wrapper ul:target{
display: block;
}
.wrapper ul>li,
.wrapper a{
display: inline-block;
width: 250px;
height: 40px;
border-bottom: 2px solid #CC2222;
text-align: center;
line-height: 40px;
font-size: 22px;
font-weight: bold;
}
a{
color: black;
text-decoration: none;
}
</style>
