首页 / CSS3 / CSS3选择器 :nth-child()的用法

CSS3选择器 :nth-child()的用法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3选择器 :nth-child()的用法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1420字，纯文字阅读大概需要3分钟。

内容图文

:nth-child()

一、偶数:nth-child(2n)

CSS3选择器 :nth-child()的用法 - 文章图片

二、奇数 :nth-child(2n-1)

CSS3选择器 :nth-child()的用法 - 文章图片

三、第6个开始的，直到最后:nth-child(n+6)

CSS3选择器 :nth-child()的用法 - 文章图片

四、选择第1个到第6个 :nth-child(-n+6)

CSS3选择器 :nth-child()的用法 - 文章图片

五、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9)

CSS3选择器 :nth-child()的用法 - 文章图片

:nth-last-child() 选择器

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

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

提示：请参阅 :nth-last-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。

/*选择列表中的倒数第n个标签 n为数字*/
:nth-last-child(n) 

/*选择倒数最后n个*/
item:nth-last-child(-n+2){}

:nth-of-type(n)

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

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

<body>
    <h1>这是标题</h1>
    <p>第一个段落。</p>
    <div>测试</div>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
</body>
p:nth-of-type(2)
{
    background:#ff0000;
}

CSS3选择器 :nth-child()的用法 - 文章图片

总结

/* 选择第n个，n位数字  */
:nth-child(n)

/* 选择列表中的偶数标签 */
:nth-child(2n)

/*选择列表中的奇数标签 */
:nth-child(2n-1)

/*选择前几个元素 */
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}

/*从第几个开始选择*/
/*【正方向范围】选择从第6个开始的，直到最后  */
:nth-child(n+6){}

/*两者结合使用，可以限制选择某一个范围 */
/*【限制范围】选择第6个到第9个，取两者的交集 */
 :nth-child(n+6):nth-child(-n+9)

/*选择列表中的倒数第n个标签 n为数字 */
:nth-last-child(n) 

/*选择倒数最后n个 */
item:nth-last-child(-n+2){}

内容总结

以上是互联网集市为您收集整理的CSS3选择器 :nth-child()的用法全部内容，希望文章能够帮你解决CSS3选择器 :nth-child()的用法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1041605.html

来源：【匿名】