兄弟节点获取

.demo1 div  + p {
    background-color: yellow;
}

    
0
    

    span
    
1
    

    
2
    
3

兄弟节点获取2

.demo2 div  ~ p {
    background-color: yellow;
}

    
0
    

    span
    
1
    
2

元素属性选择器

.demo3 p[class=a] { background-color: yellow; }
.demo3 p[class~=b] { background-color: yellow; }
.demo3 p[class|=c] { background-color: yellow; }

    
0
    
1
    
2
 
    
3
    
4
 
    
5
 
    

nth-child(n) 和 :nth-of-type(n) 的区别

.demo4 p:nth-child(2) { background-color: yellow; }
.demo4 p:nth-of-type(2) {background-color: red;}

    0
    
1
    
2
    

:active

.demo5 p:active { background-color: yellow; }

    
0
    

:focus

.demo6 p:focus { background-color: yellow; }

    
0

:first-line和:first-letter

.demo7 .p:first-line { background-color: yellow; }
.demo7 .p1:first-letter { background-color: yellow; }

1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
ww
11111111111111111111111111
ww
我我
11
ww

:nth-child 选择区间元素

.demo8 .p:nth-child(n+8):nth-child(-n+15) { background-color: yellow; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

:nth-child 当元素大于10个时选择前10个

.demo9 .p:not(.p:first-of-type:nth-last-type(-n+10) ~ .p)  { background-color: yellow; }
.demo10 .p:not(.p:first-of-type:nth-last-type(-n+10) ~ .p)  { background-color: yellow; }

1
2
3
4
5
6
7
8
9
10
11



1
2
3
4
5
6
7
8
9