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

转载于:https://www.cnblogs.com/dreammyone/p/6994714.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值