CSS: nth-child 和 nth-of-type 的区别

最新推荐文章于 2024-09-11 09:30:30 发布

原创最新推荐文章于 2024-09-11 09:30:30 发布 · 217 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

编程学习方向求指导专栏收录该内容

4 篇文章

订阅专栏

本文详细解释了CSS中first-child与first-of-type选择器的区别及应用。通过实例展示了这两种选择器如何针对不同类型的子元素进行样式设定，帮助读者理解并正确使用这些选择器。

child: 指的是标签，并没有指定类型

type: 指的是指定类型的标签

从:first-child 和 first-of-type 的对比可以看出区别

    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>


    <style>
      /*nth-child是针对所有不分类型的孩子元素，做选择的*/
      section :nth-child(1) {
        color: pink;
      }
      /*无法生效因为第一个孩子不是div*/
      body section div:first-child {
        color: skyblue;
      }

      /*nth-of-type是针对固定的孩子元素，做选择的*/
      section div:first-of-type{
        color: skyblue;
      }
    </style>

1.first-child 选择的是section的第一个子标签，但section 的第一个子标签不是div 所以选择失效

2.first-of-type选择的是section第一个div类型的子标签

所以效果如下：