4-14 序选择器

CSS3中新增的选择器最具代表性的就是序选择器

选择器	例子	例子描述
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每个 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 元素的每个 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每个 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 元素的每个 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 元素的每个 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 元素的每个 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 元素的每个 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素。

    
    
    


我是第1个段落
我是第2个段落
我是第3个段落
我是第4个段落
我是第5个段落
我是第6个段落
我是第7个段落
我是第8个段落
我是第9个段落
我是第10个段落
我是第11个段落
我是第12个段落
我是第13个段落
我是第14个段落
我是第15个段落
我是第16个段落
我是第17个段落
我是第18个段落
我是第19个段落
我是第20个段落

图片.png

sldkjg
我是h3
我是倒数第二个

    
我是div中的段落
    
我是div中的段落
    
我是div中的段落
    
我是div中的段落
    
我是标题1
    
我是标题1
    
我是标题1
    
sldkjg
    

        
laskdjg
        
我也是div中的段落
        
我也是div中的段落
        
我也是div中的段落
        
我也是div中的段落
        
我也是div中的段落
        

            
11111
            
11111
            
11111
        
    


    
askldgj
    
askldgj

图片.png

    
    
    


我是第1个段落
我是第2个段落
我是第3个段落
我是第4个段落
我是第5个段落
我是第6个段落
我是第7个段落
我是第8个段落
我是第9个段落
我是第10个段落
我是第11个段落
我是第12个段落
我是第13个段落
我是第14个段落
我是第15个段落
我是第16个段落
我是第17个段落
我是第18个段落
我是第19个段落
我是第20个段落

图片.png