本文讲解如何仅针对具有特定类名（如 `.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 结构为例：
<div> <div class="skip">no</div> <div class="element">1</div> <!-- 位置 #2 → 不是 odd --> <div class="element">2</div> <!-- 位置 #3 → 是 odd --> <div class="element">3</div> <!-- 位置 #4 → 不是 odd --> <div class="element">4</div> <!-- 位置 #5 → 是 odd --> <div class="element">5</div> <!-- 位置 #6 → 不是 odd --> <div class="element">6</div> <!-- 位置 #7 → 是 odd --> </div>
此时，.element:nth-child(odd) 实际匹配的是：
- <div class="element">2</div>（整体第 3 个子元素）
- <div class="element">4</div>（整体第 5 个子元素）
- <div class="element">6</div>（整体第 7 个子元素）
✅ 完全跳过了 .skip 元素，效果等同于“对 .element 元素重新编号后取奇数位”。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项： 此方法依赖 .skip 元素不具有 .element 类，且其标签类型与 .element 相同（均为 <div>）。若 .skip 也意外带 .element 类，则会被纳入计算，导致逻辑错乱； 若 .skip 是其他标签（如 <span> 或 <section>），而 .element 均为 <div>，则 :nth-of-type(odd) 可作为替代方案，但本例中因同为 <div>，: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 方案。
