关于css选择器中nth-of-type和nth-child的区别

最新推荐文章于 2024-04-22 15:22:18 发布

ReedSun

最新推荐文章于 2024-04-22 15:22:18 发布

阅读量2.4k

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_35955795/article/details/53350186

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

今天学习了css选择器，发现有两个伪类nth-of-type和nth-child在功能上十分相似，却又有不同的地方。但我发现无论是在MDN上，还是在w3school、菜鸟教程上，对这两个伪类选择器的对比说的都不是很明白。这篇文章就是对这两个伪类的简单探究~

`nth-of-type`和`nth-child`的区别

nth-of-type和nth-child都是css3中的伪类选择器，其功能也都是选取父元素下的直接子元素，那么他们的区别在哪里呢？

其实他们的区别就在type和child上。

nth-of-type的关键词是type，即他关心的是类型。它不会对所有子元素生效，只会对子元素中符合选择器要求的类型的子元素进行筛选，而忽略非选择器要求的类型的子元素。ele:nth-of-type(n)的意义就是选择父元素下的第n个ele类型的子元素。

nth-child的关键词是child，它关心的是所有子元素。它会对所有子元素生效。ele:nth-child的意义就是选择父元素下的第n个子元素，如果他是ele类型的，那么对他生效，如果他不是ele类型的，则不生效。

简而言之，nth-child影响到了所有child子元素，而nth-of-type则影响到了相应type的子元素。

例子

看一下下面代码所示的例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        .test-type h1:nth-of-type(n) {
            background-color: red;
        }
        .test-child h1:nth-child(n) {
            background-color: red;
        }
    </style>
</head>
<body>
  <div class="test-type">
    <h1>ReedSun1</h1>
    <h1>ReedSun2</h1>
    <p>ReedSun3</p>
    <h1>ReedSun4</h1>
    <p>ReedSun5</p>
  </div>
  <div class="test-child">
    <h1>ReedSun1</h1>
    <h1>ReedSun2</h1>
    <p>ReedSun3</p>
    <h1>ReedSun4</h1>
    <p>ReedSun5</p>
  </div>
</body>
</html>

我们来将n依次替换成1 2 3 4 5 ，运行代码，观察结果。

当n等于1和2时，我们发现，两个div是一样的，都是ReedSun1和ReedSun2分别背景变为黄色。
当n等于3时，出现不同了，第一组中ReedSun4背景变成了黄色，而第二组中没有元素背景变色。
当n等于4时，第一组中没有元素变色，第二组中ReedSun4背景变色。
当n等于5时，两组都没有背景变色的元素。

这个代码实验印证了我们的结论。
- div中第三个h1子元素是ReedSun4，这就导致n等于3时第一组中是ReedSun4变色的情况。
- div一共只有三个h1子元素，所以当n等于4或5的时候，第一组元素均不会出现背景变色的情况了。
- div中1 2 4子元素是h1元素，而3 5不是，所以第二组中，n等于3或5时没有元素背景变色，n等于1 2 4时，相应的元素背景变色。

总结

本来以为这两个伪类选择器要用非常复杂的语言才能解释清楚。现在看来，只要抓住关键字，也能轻松应对。

总之，这两个伪类选择器的区别就是type和child的不同，只要把握住这一点，就肯定能记住他们两个的区别了。

共勉~

ReedSun

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于css选择器中nth-of-type和nth-child的区别

前言今天学习了css选择器，发现有两个伪类nth-of-type和nth-child在功能上十分相似，却又有不同的地方。但我发现无论是在MDN上，还是在w3school、菜鸟教程上，对这两个伪类选择器的对比说的都不是很明白。这篇文章就是对这两个伪类的简单探究~nth-of-type和nth-child的区别nth-of-type和nth-child都是css3中的伪类选择器，其功能也都是选取父元素下
复制链接

扫一扫