目录
首先
<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是不会被添加的。
