:nth-child 伪类通过 an+b 公式按位置选中子元素，n≥0 且从1开始计数，支持 odd、even 关键词与数学表达式，常用于隔行变色或规律布局，如 2n 选偶数项、3n+1 每三项首项，需注意不区分元素类型且负值无效。
在CSS中，:nth-child 是一个非常实用的伪类选择器，可以让你根据元素在父容器中的位置来选中特定子元素。它支持关键词（如 odd、even）和公式 an + b 的形式进行灵活选择。
基本语法
:nth-child(an + b) 中：
a 是循环的步长（系数） n 是从0开始的计数变量（不能为负数） b 是偏移量（起始位置）
这个公式会匹配满足位置序号等于 an + b 的元素（序号从1开始）。
常见用法示例
以下是一些常用写法及其含义：
立即学习“前端免费学习笔记（深入）”；
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
:nth-child(2n) → 选择第2、4、6、8…个元素（偶数项） :nth-child(2n+1) → 选择第1、3、5、7…个元素（奇数项） :nth-child(n+4) → 从第4个开始，之后所有元素 :nth-child(3n+1) → 选择第1、4、7、10…个元素（每3个中的第一个） :nth-child(1) → 只选第一个子元素（等同于 :first-child） :nth-child(even) → 偶数位置元素 :nth-child(odd) → 奇数位置元素
注意事项
使用时要注意几点：
索引是从 1 开始 的，不是从0 只看兄弟元素的顺序，不区分类型（除非用 :nth-of-type） 如果公式结果小于1，则不会匹配任何元素（如 -n+0） n 是整数且 ≥ 0，例如当 a=3, b=1 时： n=0 → 3×0+1 = 1 → 第1个 n=1 → 3×1+1 = 4 → 第4个 n=2 → 3×2+1 = 7 → 第7个
实际应用场景
常用于表格隔行变色或网格布局中：
tr:nth-child(even) { background-color: #f2f2f2;}li:nth-child(3n+1) { color: red;}
这样可以让视觉呈现更有规律。
基本上就这些，掌握 an + b 的计算逻辑后，就能精准控制要选中的子元素位置了。不复杂但容易忽略细节。
以上就是css伪类:nth-child公式选择方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1000460.html
微信扫一扫 
支付宝扫一扫 
