首先
<body>
<div id="box1">
<em id="em1">1111</em>
</div>
<em id="em2">2222</em>
<div id="box2">
<em id="em3">3333</em>
<em id="em4">4444</em>
</div>
</body>
nth-child
<style>
em:nth-child(1) {
color: red;
}
</style>
- nth-child会寻找
所有em的父元素的所有子元素进行划区。- em1父元素是box1这个div，它的所有子元素就一个em，圈起来。
- em2父元素是body，所有子元素依次是box1、em、box2。
- em3和em4父元素都是box2，是同一个区域，所有子元素就是两个em。
结果：
- 三个区域找nth-child(n)里面找第n个元素，然后检查是不是em，是的话就生效，不是就不生效
- n为1时，第一个区域就一个em1，生效
- 第二个区域第一个元素为div不是em2，失效
- 第三个区域第一个元素是em3，生效
如果n为2的话就是em2和em4生效了，你可以根据上面的方法推断出来吗？
nth-of-type
<style>
em:nth-of-type(1) {
color: red;
}
</style>
结果：
1.还是同样的划区方法，不过，
会剔除所有区域中不是em的元素，这就是区别。
2.区域1和3还是一样的，区域2剔除了box1和box2，区域里只剩下一个em2，n为1时被选中。
如果n取2时，只有em4被选中噢
nth-child如果前面不添加筛选查找元素
不推荐这么使用，筛选范围太泛了。- 我们上文是使用
em:nth-child(n)，如果不添加em，也就是会将所有区域划分且没有限制元素是什么了，只要是第n个就添加样式。
例：
- 首先我们还是将内容限制在body，否则会从html整个根元素开始划分，注意中间有空格，因此查找元素不是body。
- 而且用body来划分，区域就是body底下所有区域，这里还是我们原来的三个区域，比较好理解。
- 第一个区域和第三个区域还是跟原来一样。
区别就是第二个区域第一个元素是box1，这次没有限制必须是em了，所以样式生效。
<style>
body :nth-child(1) {
color: red;
}
</style>
虽然还是em1和em3变成红色，但是我们可以检查元素发现，box1也被添加上了样式：
可以回头再试试em:nth-child(n)的话会发现box1是不会被添加的。
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
