CSSnth-child公式使用与技巧解析

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS nth-child公式详解与应用技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

: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开始）。

常见用法示例

以下是一些常用写法及其含义：

• :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 的计算逻辑后，就能精准控制要选中的子元素位置了。不复杂但容易忽略细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSnth-child公式使用与技巧解析》文章吧，也可关注golang学习网公众号了解相关技术文章。