在CSS中，nth-child() 是一个伪类选择器，它允许你根据元素在其父元素中的位置（索引）来选择元素。它的使用非常灵活，可以用于各种场景，比如给表格的行设置斑马纹效果、选择特定位置的元素等。

基本语法

element:nth-child(an+b) { 
    /* 样式规则 */
}

• element：要选择的元素类型（如li，div等，也可以省略表示所有子元素）
• an+b：一个公式，其中n从0开始计数，然后逐步增加（0,1,2,3,...）。a和b都是整数，你可以指定它们来匹配特定位置。

常见公式

• nth-child(n)：选择第n个元素（直接写数字）。
• nth-child(odd)：选择所有奇数位置的元素（等同于2n+1）。
• nth-child(even)：选择所有偶数位置的元素（等同于2n）。
• nth-child(3n)：选择每3个元素中的第三个（即3,6,9,...）。
• nth-child(3n+1)：选择位置为1,4,7,10,...的元素。
• nth-child(-n+3)：选择前3个元素（因为当n=0时，-0+3=3；n=1时，-1+3=2；n=2时，-2+3=1；n=3时，-3+3=0，不再匹配）。

使用场景举例

为列表项添加彩色自定义符号，并根据位置自动变色

HTML代码

<ul class="colorful-list">
  <li>项目 1 - 红色符号</li>
  <li>项目 2 - 蓝色符号</li>
  <li>项目 3 - 绿色符号</li>
  <!-- 更多项目... -->
</ul>

CSS样式表

.colorful-list {
  list-style: none; /* 移除默认符号 */
  padding-left: 0;
}

/* 通过 ::before 创建自定义符号 */
.colorful-list li::before {
  content: "•"; /* Unicode 圆点符号 */
  display: inline-block;
  width: 1em;
  margin-right: 10px;
  font-size: 1.5em; /* 放大符号 */
}

/* 关键：按位置染色 */
.colorful-list li:nth-child(4n+1)::before { color: #FF6B6B; } /* 红 */
.colorful-list li:nth-child(4n+2)::before { color: #4ECDC4; } /* 蓝 */
.colorful-list li:nth-child(4n+3)::before { color: #FFE66D; } /* 黄 */
.colorful-list li:nth-child(4n+4)::before { color: #1A535C; } /* 深绿 */

• nth-child的索引是从1开始的（不是0）。
• 也可以使用nth-of-type，它是根据类型来选择，但在这个场景中，因为列表项都是相同的类型（li），所以使用nth-child和nth-of-type效果一样。

通过合理运用 nth-child 可以创建出动态的视觉层次效果，让列表内容呈现专业的视觉节奏感，同时保持代码简洁可维护。