css中的伪类选择器———nth-child（）

在 CSS 中，nth-child() 是一个伪类选择器，用于选择父元素中特定位置的子元素。它允许你根据元素在兄弟元素中的位置来精准匹配元素，非常适合创建有规律的布局或样式。

基本语法

父元素 子元素:nth-child(表达式) {
  /* 样式规则 */
}

常用用法

1. 具体数字：选择第 N 个子元素（从 1 开始计数）

   /* 选择列表中的第 3 个项目 */
   li:nth-child(3) {
     color: red;
   }

2. 关键字：

   • odd：选择所有奇数位置的子元素（1、3、5…）
   • even：选择所有偶数位置的子元素（2、4、6…）
   /* 表格隔行变色 */
   tr:nth-child(odd) {
     background-color: #f2f2f2;
   }

3. 公式 an+b：创建更复杂的选择模式

   • n 从 0 开始递增
   • a 表示周期大小
   • b 表示起始位置

   示例：

   /* 选择第 3、6、9...个子元素 */
   div:nth-child(3n) { ... }
   
   /* 选择从第 2 个开始，每隔 3 个的元素（2、5、8...） */
   p:nth-child(3n+2) { ... }
   
   /* 选择前 3 个子元素 */
   span:nth-child(-n+3) { ... }

注意事项

• 计数包含父元素的所有子元素，无论类型（与 nth-of-type() 不同，后者只计算相同类型的元素）
• 索引从 1 开始，而非 0
• 括号内的表达式可以省略 n，如 (2) 等同于 (0n+2)

这个选择器在创建网格布局、列表样式、表格斑马条纹等场景中非常实用，能大大减少冗余的类名定义。这条消息已经在编辑器中准备就绪。你想如何调整这篇文档?请随时告诉我。