nth-child(n) 选择器详解

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

例如： <div id="n1">

    <div id="n2">        <ul id="n3">            <li id="n4" class="c">item1</li>            <li id="n5">item2</li>            <li id="n6" class="c">item3</li>        </ul>    </div>    <div id="n7">        <ul id="n8">            <li id="n9">item1</li>            <li id="n10">item2</li>        </ul>    </div></div>

现在，我们想要为每个ul标签内查找它的第2个li标签

document.select("ul li:nth-child(2)");

接着，为每个ul标签查找自然顺序为奇数的li标签

// 选择了id分别为n4、n6、n9的3个元素document.select("ul li:nth-child(odd)");

为每个ul父标签查找自然顺序为3n的li标签

// 选择了id为n6的一个元素// 虽然这里用的#n1进行限定，实际上jQuery先是通过查找所有匹配#n1 li的元素，然后再看这些元素是不是父元素的第3n个元素，如果是就保留，否则就舍弃掉。document.select("#n1 li:nth-child(3n)");

查找所有包含类名c的li标签，并且它们必须是父元素的偶数顺序的子元素，我们可以编写如下jQuery代码：

// 没有选择任何元素，返回空的jQuery对象// 虽然匹配li.c的有n4、n6两个元素，但它们都不是父元素的偶数顺序的子元素，因此无法匹配$("li.c:nth-child(even)");