:nth-child()按dom顺序计数，受所有子节点影响；:nth-of-type()仅统计同类标签；-n+5解不等式得1~5；3n+2实现每3项高亮第2项；混合类型中:nth-child(odd)可能无匹配。
别指望 :nth-child() 能按“同类元素”计数——它只认 DOM 顺序，混入任何其他标签、注释、空格节点都会打乱序号。真正复杂的用法，其实是绕开这个限制的实战策略。
为什么 :nth-child(2n) 选不到你想要的偶数行
因为 :nth-child() 统计的是父元素下所有直接子节点，包括 <thead>、<code><caption></caption>、<div>、甚至 HTML 注释（<code><!-- -->）。比如表格里有 <thead>，第一个 <code><tr> 实际是第 3 个子元素，<code>tr:nth-child(2n) 就会跳过它，从第 4 行开始匹配。
- 检查 DOM 结构：用浏览器开发者工具看目标元素在父级下的真实序号（右键 → “检查”，观察其在父节点中的位置）
- 避免全局作用：不用
table tr:nth-child(even)，改用tbody tr:nth-child(even)锁定范围 - 更稳妥替代：当父容器内有干扰节点时，直接换
tbody tr:nth-of-type(even)—— 它只数<tr>，无视其他兄弟节点<h3> <code>:nth-child(-n+5)是怎么选前 5 个的公式
-n+5的本质是：对每个非负整数n（即n = 0,1,2,...），计算结果-n+5，取所有 ≥1 的值作为匹配序号。代入得：当n=0→ 5；n=1→ 4；n=2→ 3；n=3→ 2；n=4→ 1；n=5→ 0（无效）。所以匹配序号为 1、2、3、4、5。- 这不是“从第 5 个往前数”，而是解不等式
-n + 5 ≥ 1得出的自然结果 -
-n+1等价于:first-child；-n+2匹配前两个；但-n+0不匹配任何元素（结果恒为 0） - 不能写成
5-n或+5-n，CSS 解析器只接受标准形式-n+b，且b必须为整数
如何实现「每 3 项一组，高亮第二项」
用
:nth-child(3n+2)。公式中a=3是组宽，b=2是组内偏移（从 1 开始计）。代入n=0,1,2...得到匹配位置：2、5、8、11…-
3n+1→ 第 1、4、7…（每组开头） -
3n+2→ 第 2、5、8…（每组中间） -
3n+3或简写为3n→ 第 3、6、9…（每组末尾） - 别写
3n+0：浏览器不识别，必须写3n - 如果组内实际只有 2 个元素，
3n+3就永远不生效——它依赖 DOM 中真实存在对应序号的节点
混合类型列表中交替样式失效的根本原因
当你写
div.card:nth-child(odd)，浏览器先找“父元素的第 1、3、5…个子元素”，再判断它是不是div且带card类。如果第 1 个子是<span></span>，第 3 个是<p></p>，那整个选择器可能一个都不匹配。- 这不是 bug，是规范行为：
:nth-child()的序号计算与前面的选择器无关 - 想按“带 class 的元素”交替？只能用 JS 动态加 class，或改用 CSS 自定义属性配合
:has()（注意兼容性） - 小规模场景可妥协：确保目标元素在父容器中连续、无干扰，例如用
article > .card并保证 HTML 中只放.card
最常被忽略的点：你以为在控制“第几个同类元素”，其实你一直在和整个 DOM 树的物理结构博弈。真正复杂的不是公式本身，而是预判哪些节点会悄悄挤进计数序列里。
- 这不是“从第 5 个往前数”，而是解不等式
