如何在CSS中使用:nth-child选择器_通过:nth-child(n)规律性设置样式

:nth-child(n) 是CSS中按子元素位置选中并设置样式的伪类选择器，适用于列表、表格等规律性样式控制；支持数字、关键字（odd/even）和an+b公式写法，如:nth-child(2)选第二个子元素，:nth-child(odd)选奇数项，:nth-child(3n+1)从第一项起每三项选一个，:nth-child(-n+3)选前三个；常用于隔行变色（tr:nth-child(even){background:#e6f7ff}）或周期性样式（li:nth-child(4n+1){border-left:3px solid #007acc}）；注意其计算包含所有同级子元素，不分标签类型，若需按标签类型计数应使用:nth-of-type(n)。

在CSS中，:nth-child(n) 是一个非常实用的伪类选择器，它可以根据元素在其父容器中的位置来选中特定的子元素，并为其设置样式。这个选择器特别适合用于规律性地为列表、表格行或网格项等批量添加样式，比如隔行变色、每三列加边距等。

基本语法与使用方式

:nth-child(n) 的括号中可以填入数字、关键字或公式，用来匹配对应位置的子元素。其父元素下的所有同级子元素都会被计入顺序，不论标签类型。

• :nth-child(2)：选中第2个子元素
• :nth-child(odd)：选中所有奇数位置的元素（1, 3, 5...）
• :nth-child(even)：选中所有偶数位置的元素（2, 4, 6...）
• :nth-child(3n)：每3个元素选中一次（3, 6, 9...）
• :nth-child(3n+1)：从第1个开始，每隔3个选中（1, 4, 7...）
• :nth-child(-n+3)：选中前3个元素

实现隔行变色效果

这是 :nth-child 最常见的应用场景之一，常用于表格或列表中提升可读性。

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #e6f7ff;
}

按周期规律设置样式

当你需要每几个元素应用一次样式时，可以用 an+b 的公式形式。

Creatext AI

专为销售人员提供的 AI 咨询辅助工具

39

查看详情

立即学习“前端免费学习笔记（深入）”；

li:nth-child(4n+1) {
  border-left: 3px solid #007acc;
  padding-left: 10px;
}

div.item:nth-child(-n+5) {
  opacity: 1;
}

注意事项与技巧

使用 :nth-child 时要注意它基于父元素下所有子元素的顺序，不区分标签类型。如果父元素中混有不同类型标签（如 div、p、span），计算顺序仍会连续。

/* 选中父元素中第2个 div 子元素 */
div:nth-child(2)
<p>/<em> 选中父元素中第2个 div 类型的元素（跳过其他标签） </em>/
div:nth-of-type(2)

基本上就这些。掌握 :nth-child(n) 能让你更高效地控制页面布局样式，无需额外类名或JavaScript干预，就能实现灵活美观的视觉节奏。

以上就是如何在CSS中使用:nth-child选择器_通过:nth-child(n)规律性设置样式的详细内容，更多请关注php中文网其它相关文章！