:nth-child 选择器通过公式 an+b 精准定位子元素，如 even/odd 实现隔行变色，tr:nth-child(even) 设偶数行背景，.grid-item:nth-child(3n+1) 控制网格首列边距，结合 :not() 排除特定元素，提升样式规律性与维护性。
:nth-child 是 CSS 中一个非常实用的选择器，用于选中父元素下的第 n 个子元素。它特别适合为具有规律性排列的子元素设置样式，比如隔行变色、每三列一组布局等。下面详细介绍其用法和常见应用场景。
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情 
基本语法与公式
选择器格式为 :nth-child(an + b)，其中 a 是循环周期，b 是偏移量。n 从 0 开始递增。even / odd：可直接使用关键字，如 :nth-child(even) 选中偶数项，:nth-child(odd) 选中奇数项。 数字：如 :nth-child(3) 只选第 3 个子元素。 公式示例： :nth-child(2n + 1) 表示奇数项（1, 3, 5…） :nth-child(3n) 每第 3 个元素（3, 6, 9…） :nth-child(4n + 1) 从第 1 个开始，每隔 4 个选一次（1, 5, 9…）
实现隔行变色
表格或列表中常用此技巧提升可读性。
tr:nth-child(even) { background-color: #f2f2f2;}
这样所有偶数行背景变为浅灰色，视觉上更清晰。
网格布局中的列样式控制
在多列布局中，可通过 :nth-child 控制特定列的样式。例如每 3 列一组，想让第一列左边距为 0：
.grid-item:nth-child(3n + 1) { margin-left: 0;}
或者为每组最后一列设置右边距清零：
.grid-item:nth-child(3n) { margin-right: 0;}
排除特定元素或重置样式
结合 :not() 可灵活跳过某些元素。比如给所有 div 子元素加边框，但跳过第一个：
div:nth-child(n+2) { border-top: 1px solid #ccc;}
或配合类名排除：
.item:not(.special):nth-child(odd) { background: yellow;}
基本上就这些。掌握 :nth-child 的数学逻辑后，可以轻松实现各种规律性样式控制，无需额外类名，结构与样式分离更彻底。关键是理解 an + b 的模式，并多做测试验证匹配结果。
以上就是CSS:nth-child选择器如何使用_规律性子元素样式应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/967472.html
微信扫一扫 
支付宝扫一扫 
