nth-child选择器按元素在父容器中的位置应用样式，常用于实现表格或列表的奇偶行交替样式。其语法为:nth-child(an+b)，odd和even是常用简写，分别对应2n+1和2n。例如table tr:nth-child(odd)设置奇数行背景色，ul li:nth-child(even)设置偶数项样式，实现斑马条纹提升可读性。需注意nth-child基于所有子元素计数，不区分标签类型，若需按特定标签排序应使用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 是基于父元素的所有子元素计数，不区分标签类型。例如：
<div> <p>段落1</p> <span>辅助信息</span> <p>段落2</p> <p>段落3</p> </div>
若写 p:nth-child(odd)，只会选中第1个和第3个 p（它们位于第1和第3个子元素位置），而第2个 p 在第4个位置，是偶数，不会被 odd 匹配。
如果只想按 p 标签自身顺序隔行选中，应使用 p:nth-of-type(odd)。
基本上就这些。灵活使用 nth-child(odd) 和 nth-child(even)，能轻松实现美观的交替样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
