曾经一直有个误解,以为
:nth-child(n)是匹配元素的第n个
后来才发现
E:nth-child(n) 选择作为父元素的第一个子元素的元素E
有点绕,这里匹配的时候需要满足两个条件:
1.该元素是元素E
2.该元素是父元素的第一个子元素
<div class="wrap">
<div>第一个子元素</div>
<span>第二个子元素</span>
<div>第三个子元素</div>
</div>
所以
<style>
.wrap div:nth-child(2);
</style>
并不是选择wrap中的第二个div, 匹配的过程中,首先匹配wrap中的div,分别是第一个子元素和第三个子元素
然后匹配:nth-child(2),父元素的第二个子元素,这是span,不是div,所以匹配失败
要想匹配第三个子元素,可以用
.wrap div:nth-child(3);
在jQuery中的选择器遵循同样的规则
另外:nth-child(n+1)中,n的起始值是0
同样的用法还有
E F:nth-last-child(n) 选择元素E的倒数第n个子元素F
E F:nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E F:nth-last-of-type(n)选择附远足内具有指定类型的倒数第n个E元素