本文讲解如何仅针对具有特定类名（如 `.element`）的元素进行 `nth-child` 类型的奇偶筛选，同时完全忽略其他无关元素（如 `.skip`），纯 css 实现且无需 javascript。
在 CSS 中，:nth-child(odd) 或 :nth-child(even) 是基于父容器内所有子元素的物理位置计算的，而非按类名过滤后的逻辑序号。因此，若直接使用 .element:nth-child(odd)，它匹配的是「位于第 1、3、5…个位置且同时拥有 .element 类」的元素——这恰好能绕过 .skip 元素，因为 .skip 不满足 .element 类条件，自然不会被选中。
以如下 HTML 结构为例：
no123456
此时，.element:nth-child(odd) 实际匹配的是：
-
2（整体第 3 个子元素）
-
4（整体第 5 个子元素）
-
6（整体第 7 个子元素）
✅ 完全跳过了 .skip 元素，效果等同于“对 .element 元素重新编号后取奇数位”。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项： 此方法依赖 .skip 元素不具有 .element 类，且其标签类型与 .element 相同（均为 ）。若 .skip 也意外带 .element 类，则会被纳入计算，导致逻辑错乱； 若 .skip 是其他标签（如 或 ），而 .element 均为 ，则 :nth-of-type(odd) 可作为替代方案，但本例中因同为 ，:nth-of-type 无法区分类名，故不适用； 不可用 :nth-child(odd of .element)（该语法属 Selectors Level 4，目前浏览器支持度有限，截至 2024 年主流浏览器尚未全面支持）。
✅ 推荐写法（兼容性好、语义清晰、零 JS）：
.element:nth-child(odd) {
background-color: #000;
color: #fff;
font-weight: bold;
}该规则简洁可靠，适用于所有现代浏览器（Chrome 2+, Firefox 3.5+, Safari 3.1+, Edge 12+），是解决“逻辑奇偶筛选需跳过干扰节点”问题的标准 CSS 方案。
