关于css选择器中nth-of-type和nth-child的区
2016-11-26 本文已影响0人
ReedSun_QD
前言
今天学习了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的不同，只要把握住这一点，就肯定能记住他们两个的区别了。
共勉~
