一、:nth-child


1.1 说明



:nth-child(n)选择器匹配属于其父元素的第N个子元素&＃xff0c;不论元素的类型。n可以是数字、关键词或公式。



注意&＃xff1a;如果第N个子元素与选择的元素类型不同则样式无效&＃xff01;


1.2 示例




    

我是第1个段落


    

我是第2个段落


    

我是第3个段落




    

我是第1个段落


    我是第1个文本
    

我是第2个段落



1.3 改进


如果想让上面第二个生效的可以去除子元素

的选择&＃xff0c;写一个父元素

加一个空格&＃xff0c;以防止:nth-child不生效。




    

我是第1个段落


    我是第1个文本
    

我是第2个段落



二、:nth-of-type


2.1 说明



:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素。n可以是数字、关键词或公式。



2.2 示例




    

我是第1个段落


    

我是第2个段落


    

我是第3个段落




    

我是第1个段落


    
第1个引用

    

我是第2个段落


    

我是第3个段落



CSS3选择器:nth-child与:nth-of-type区别



转载于:https://blog.51cto.com/mazey/1941569