: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 class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<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 更可控。
