:nth-child(odd)选奇数行，:nth-child(even)选偶数行，但需确保目标元素在父容器中连续、同级且无其他类型元素干扰；否则应改用:nth-of-type()或js动态加class。
nth-child()选奇数行和偶数行怎么写才不翻车
直接说结论：:nth-child(odd) 选奇数行，:nth-child(even) 选偶数行——但前提是这些元素在父容器里是连续的、同级的、且没有被其他类型元素打断。很多人写了 :nth-child(2n+1) 却发现第一行没生效，其实是前头混了个 <h3></h3> 或空 <div>，导致序号错位。
<p>常见错误现象：<code>tr:nth-child(odd) 想给表格隔行变色，结果颜色跳着来；或者用 li:nth-child(2) 想选第二个列表项，却选中了第三个 <li> ——因为前面插了个 <li class="divider">，它也算 :nth-child() 的“孩子”。
-
:nth-child()数的是父元素下所有子元素的位置序号，不管标签名、class、是否显示 - 要严格隔行，确保目标元素是父容器内**连续、同级、无干扰**的子元素
- 如果结构不干净，优先考虑
:nth-of-type()（只数同类型标签）或 JS 动态加 class
用 2n、2n+1、3n+2 这些公式时怎么算对位置
公式本质是数学表达式：an+b 表示“从第 b 个开始，每隔 a-1 个取一个”。别死记，现场推一遍更稳：
-
:nth-child(2n)→ n=1→2, n=2→4, n=3→6… 就是 2,4,6…（等价于even） -
:nth-child(2n+1)→ n=0→1, n=1→3, n=2→5… 就是 1,3,5…（等价于odd） -
:nth-child(3n+2)→ n=0→2, n=1→5, n=2→8… 选第 2、5、8 行
注意：n 从 0 开始代入，不是从 1；负数结果会被忽略（比如 3n-1 当 n=0 得 -1，无效）。
立即学习“前端免费学习笔记（深入）”；
nth-child() 和 nth-of-type() 到底该用哪个
关键区别在“计数依据”：:nth-child() 看位置，:nth-of-type() 看标签类型。实际项目里，后者更抗干扰。
使用场景举例：父容器里有 <p></p>、<div>、<code><p></p>、<span></span>、<p></p>……你想给第 2 个 <p></p> 加样式：
-
p:nth-child(2)→ 错，第 2 个孩子是<div>，不匹配 <li> <code>p:nth-of-type(2)→ 对，它是第 2 个<p></p>元素 -
ul li:nth-child(odd) a：选的是“位于奇数位置的<li>里的<a></a>”，不是“所有<li>里位于奇数位置的<a></a>” -
li.active:nth-child(2n)：必须同时满足“有 classactive”且“是父元素第 2/4/6… 个孩子”，顺序无关，但两个条件都得成立 - 如果父元素用了
display: flex或grid，:nth-child()依然按 DOM 顺序计数，跟视觉排列无关
性能上没差别，但兼容性要注意：:nth-of-type() 在 IE9+ 支持，:nth-child() IE9+ 也支持，老项目若需 IE8，两个都得放弃，改用 class 控制。
伪类嵌套或组合使用时容易漏掉的细节
CSS 伪类本身不支持嵌套，但可以和其他选择器连用。最容易忽略的是层叠顺序和作用范围：
复杂布局里，别指望靠多层 :nth-child() 套娃解决逻辑问题——结构一变，全失效。真需要动态规律，JS 计算索引 + class 更可控。
