结构伪类选择器中的 n

曾经一直有个误解，以为
: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元素