:has() 无法实现真正隔行变色，只能通过条件过滤跳过特定行；其本质是存在性判断而非序号计算，需配合 :not() 和兄弟选择器手动模拟，或改用 js 动态添加视觉序号类。
用 :has() 跳过特定行再隔行变色，核心是「选中目标行」而非「计算序号」
纯 CSS 没有“跳过第 n 行再隔行”的内置计数器，:has() 的价值在于：它允许你基于某行是否满足条件（比如含 data-skip="true" 或有特定 class），动态决定它是否参与后续的隔行逻辑。不是靠位置编号，而是靠内容/状态判断。
常见错误是试图写 tr:has([data-skip]) ~ tr:nth-child(odd) —— 这根本不会生效，因为 :nth-child 算的是 DOM 位置，和 :has() 无关，两者不联动。
正确思路是：先排除掉要跳过的行，再对剩下的行重新“编号”——而 CSS 里唯一能模拟这种“重编号”的方式，就是用兄弟选择器逐个匹配。
:has() 配合 :not() 和兄弟选择器手动构造「可见行序列」
假设你要渲染一个表格，其中带 class="ignore" 的行不参与隔行着色，其余行按视觉顺序 1-2-3-4… 交替背景。CSS 无法生成新序号，但可以这样逼近效果：
立即学习“前端免费学习笔记（深入）”；
- 第一行（非 ignore）：用
tr:not(.ignore):first-of-type - 第二行（非 ignore）：用
tr:not(.ignore):has(~ tr:not(.ignore))不够准，得换——实际用tr:not(.ignore) ~ tr:not(.ignore):first-of-type - 更可靠写法是分层匹配：给所有非 ignore 行设默认背景，再用相邻兄弟选择器覆盖偶数位
示例（简化版，适用于最多 10 行）：
tr:not(.ignore) {
background: #fff;
}
tr:not(.ignore) ~ tr:not(.ignore) {
background: #f5f5f5;
}
tr:not(.ignore) ~ tr:not(.ignore) ~ tr:not(.ignore) {
background: #fff;
}
tr:not(.ignore) ~ tr:not(.ignore) ~ tr:not(.ignore) ~ tr:not(.ignore) {
background: #f5f5f5;
}
这不是真正“隔行”，而是手动展开前几层兄弟关系。优点是完全静态、无 JS、兼容支持 :has() 的浏览器；缺点是不可扩展，行数一多就爆炸。
真正实用的方案：用 :has() 标记「下一个有效行」并递推
如果你必须用纯 CSS 且行数不确定，唯一可行的递推模式是利用 :has() 判断“当前行之后是否存在下一个非 ignore 行”，再结合 :nth-of-type 做有限控制。但注意：:nth-of-type 仍按原始 DOM 序号算，不是视觉序号。
所以更现实的做法是：放弃“完美隔行”，转为「让每对连续的有效行拥有不同背景」。例如：
tr:not(.ignore) {
background: #fff;
}
tr:not(.ignore):has(+ tr:not(.ignore)) {
background: #eef2ff;
}
tr:not(.ignore):has(+ tr:not(.ignore) + tr:not(.ignore)) {
background: #fff;
}
这段代码的意思是：如果某行后面跟着至少 1 个、2 个、3 个… 有效行，就切一次背景。它产生的效果接近交替，但只在有效行密集时稳定；一旦中间插了多个 .ignore 行，节奏就会断掉。
这说明：:has() 能帮你做条件过滤，但不能替代序号抽象——它解决的是“是否存在”，不是“排第几”。
为什么不用 JS 就很难做到稳定隔行？
因为浏览器渲染时，CSS 选择器无法访问“已渲染的有效行计数器”。:nth-child、:nth-of-type 都绑定在 DOM 树结构上，不受样式或属性影响；:has() 只能触发条件匹配，不能生成新索引。
容易被忽略的一点：即使你用 :has(tr:nth-child(odd)) 这类嵌套，它也只会检查子元素是否满足 nth-child，而不是让父元素因此获得奇偶性——:has() 是“存在性断言”，不是“序号代理”。
所以真要稳定、可维护、不限行数，还是得在 JS 里加 class，比如 row-visual-index-1、row-visual-index-2，再用 CSS 匹配。CSS :has() 在这里更适合做开关控制（比如“当后面有警告行时高亮当前行”），而不是做序列生成器。
