nth-child(n) 选择器详解

Posted 2020-09-22

定义和用法

: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)");