:nth-child(an+b)按子元素位置匹配，a为周期，n为变量，b为偏移；可选奇偶项、第几个或每几个元素，如2n+1选奇数项，3n+5从第5起每3个选1，-n+4选前4个，4n选4的倍数项；注意索引从1开始且基于所有子元素，非同类标签用:nth-of-type。
使用 CSS 的 :nth-child 伪类可以选择父元素下的特定子元素，按它们在文档流中的位置进行匹配。它非常灵活，可以选中奇数项、偶数项，或者第几个、每几个元素。
基本语法
:nth-child(an + b) 是核心公式，其中：
a 是循环的周期（步长） n 是从 0 开始的变量（代表 0, 1, 2, …） b 是偏移量（起始位置）
比如 2n+1 表示“每两个中的第一个”，即奇数项。
常见用法示例
下面是一些实用的写法和对应效果：
立即学习“前端免费学习笔记（深入）”；
选择奇数位置的子元素
常用于表格隔行变色：
tr:nth-child(odd) { background-color: #f2f2f2;}
选择偶数位置的子元素
配合上面实现斑马条纹：
tr:nth-child(even) { background-color: #e6e6e6;}
选择第 3 个子元素
只选中第三个：
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
li:nth-child(3) { color: red;}
从第 5 个开始，每 3 个选一次（5, 8, 11, …）
公式是 3n+5：
div:nth-child(3n+5) { border-top: 1px solid #ccc;}
选择前 4 个子元素
使用负系数加偏移：
li:nth-child(-n+4) { font-weight: bold;}
每 4 个元素选中一个（如 4, 8, 12, …）
section:nth-child(4n) { margin-bottom: 20px;}
注意事项
:nth-child 计算的是父元素下所有子元素的位置，不管类型是否一致。例如：
- 第一项
- 第二项
段落（不是 li）
此时第二个 li 实际上是第 3 个子元素，所以要用 li:nth-child(3) 才能选中。
如果只想根据同类标签排序，应使用 :nth-of-type。
小技巧：快速验证公式
把 an + b 中的 n 替换为 0, 1, 2, 3… 看结果：
3n+1 → 当 n=0 得 1；n=1 得 4；n=2 得 7 → 选 1, 4, 7, 10… 2n → 2, 4, 6, 8… → 偶数 2n+1 → 1, 3, 5, 7… → 奇数
基本上就这些，掌握公式后可以精准控制页面中的任意位置元素。关键是理解索引是从 1 开始，且计算基于所有子节点的位置。不复杂但容易忽略细节。
以上就是如何通过css :nth-child选择特定子元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1055603.html
微信扫一扫 
支付宝扫一扫 
