您的位置：首页 > Web前端 > CSS

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

2016-11-26 12:43 417 查看

前言

今天学习了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的不同，只要把握住这一点，就肯定能记住他们两个的区别了。

共勉~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css css3

相关文章推荐

新的分享

章节导航