CSSnth-child奇偶样式设置技巧

CSS中的nth-child选择器是实现表格、列表等结构奇偶行交替样式（即“斑马条纹”）的高效利器，它通过位置索引（如odd、even或2n+1、2n）精准控制元素样式，显著提升内容可读性与视觉层次；但需注意其计数基于父容器中所有子元素的总顺序，不区分标签类型，若需按特定元素类型独立编号，则应改用nth-of-type，掌握这一区别才能避免常见样式错位问题。

在CSS中，nth-child 选择器可以让你根据元素在其父容器中的位置来应用样式。它特别适合用于为列表、表格等结构中的奇数行和偶数行设置不同的样式，比如实现斑马条纹效果。

理解 nth-child 的基本语法

nth-child(an + b) 是其核心形式，其中 a 是循环周期，b 是偏移量。常用简写包括 odd（奇数）和 even（偶数）。

• tr:nth-child(odd)：匹配所有奇数位置的子元素（1, 3, 5...）
• tr:nth-child(even)：匹配所有偶数位置的子元素（2, 4, 6...）
• li:nth-child(2n+1)：等同于 odd，选择奇数项
• li:nth-child(2n)：等同于 even，选择偶数项

实际应用：表格斑马条纹

给表格的奇偶行设置不同背景色，提升可读性：

table tr:nth-child(odd) {
  background-color: #f9f9f9;
}
table tr:nth-child(even) {
  background-color: #eef6ff;
}

这样每行交替显示浅灰和浅蓝，视觉更清晰。

应用于列表项的样式交替

对无序或有序列表也可以使用：

ul li:nth-child(odd) {
  background: #f0f0f0;
  padding: 8px;
}
ul li:nth-child(even) {
  background: white;
  padding: 8px;
}

即使列表中有其他类型元素插入，只要 li 是其父级的直接子元素，nth-child 仍按总顺序计算位置。

注意点与常见误区

nth-child 是基于父元素的所有子元素计数，不区分标签类型。例如：

  <p>段落1</p>
  <span>辅助信息</span>
  <p>段落2</p>
  <p>段落3</p>

若写 p:nth-child(odd)，只会选中第1个和第3个 p（它们位于第1和第3个子元素位置），而第2个 p 在第4个位置，是偶数，不会被 odd 匹配。

如果只想按 p 标签自身顺序隔行选中，应使用 p:nth-of-type(odd)。

本篇关于《CSSnth-child奇偶样式设置技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！