css3 选择器：结构伪类选择器（三）

:nth-child(n)
:nth-last-child(n)
:first-child
:last-child
:only-child

:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-of-type

:root
:empty

• :nth-child(n)

    
0-0
    

        
1-0
        
1-1
        
1-2
        
1-3
        
1-4
    

匹配第n个元素，n是从1开始的，而不是0，位置不区分同级元素类型。

• :nth-last-child(n)

    
0-0
    

        
1-0
        
1-1
        
1-2
        
1-3
        
1-4
    

倒叙地匹配第n个元素，n是从1开始的，而不是0，位置不区分同级元素类型。

• :first-child 等同于 :nth-child(1)。

• :last-child 等同于 :nth-last-child(1)。

• :only-child

    

        
1-0
        
1-1
    
    

        
2-0
    

仅当元素在其父元素中是唯一一个子元素时，才匹配该子元素，位置不区分同级元素类型。

---

• :nth-of-type(n)

    
0-0
    

        
1-0
        
1-1
        
1-2
        
1-3
        
1-4
    

匹配元素在同级而且相同元素中第n次出现的元素，n是从1开始的，而不是0。

image.png

• :nth-last-of-type(n)

    
0-0
    

        
1-0
        
1-1
        
1-2
        
1-3
        
1-4
    

倒叙地匹配元素在同级而且相同元素中第n次出现的元素，n是从1开始的，而不是0。

• :first-of-type 等同于 :nth-of-type(1)。

• :last-of-type 等同于 :nth-last-of-type(1) 。

• :only-of-type

    

        
1-0
        
1-1
    
    

        
2-0
    

仅当该元素在其父元素中仅有唯一一个该元素时，才匹配该元素。

---

• :root

    
0-0
    

        
1-0
        
1-1
        
1-2
        
1-3
        
1-4
    

:root始终指向标签，不要试图在选择器前面加上元素，像这样h4:root，它的意思是当前页面的顶级元素并且该元素为h4标签时匹配。

• :empty

    

    

        
2-0
    
    
3-0

仅当元素内部没有子元素和文本时，匹配该元素。

---

总结

1. ...-child与...-of-type的区别：-child统计时不论元素种类，只论元素位置；-of-type统计时会先区分元素种类，再查询当前种类下的位置。
2. n可以是正整数（1、2、3），表示第一、第二、第三位；可以是n本身（n），表示匹配所有位置；可以是n和算术（2n-1），表示匹配基数或者更灵活的；也可以是字符串odd和even（odd、even），分别表示匹配奇数位置和偶数位置。