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

2021-07-14 23:05

阅读：613

标签：html css css3

一、:nth-child

1.1 说明

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

注意：如果第N个子元素与选择的元素类型不同则样式无效！

1.2 示例


    我是第1个段落
    我是第2个段落

    我是第3个段落


    我是第1个段落
    我是第1个文本
    我是第2个段落

1.3 改进

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

的选择，写一个父元素

加一个空格，以防止: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个段落

本文出自 “不知不问” 博客，请务必保留此出处http://mazey.blog.51cto.com/12997993/1941569
CSS3选择器:nth-child与:nth-of-type区别
标签：html   css   css3   
原文地址：http://mazey.blog.51cto.com/12997993/1941569

上一篇：excel转html 实现在线预览

下一篇：php MVC

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS3选择器:nth-child与:nth-of-type区别
文章链接：http://soscw.com/essay/105308.html

亲，登录后才可以留言！

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

一、:nth-child

1.1 说明

1.2 示例

1.3 改进

二、:nth-of-type

2.1 说明

2.2 示例

评论

热门文章

推荐文章

最新文章

置顶文章