本文讲解如何仅针对具有特定类名（如 `.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 结构为例：
no 1 2 3 4 5 6
此时，.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，目前浏览器支持度有限，截至 2025 年主流浏览器尚未全面支持）。
✅ 推荐写法（兼容性好、语义清晰、零 JS）：
.element:nth-child(odd) {
background-color: #000;
color: #fff;
font-weight: bold;
}该规则简洁可
