面试题：CSS 如何快速选取同组兄弟元素的偶数序号元素？

这是一个考察对 CSS 选择器，特别是结构性伪类掌握程度的面试题。

最快速、最直接的方法是使用 :nth-child(even) 伪类选择器。

核心答案

/* 选取父元素下所有偶数位置的同组兄弟元素 */
.parent :nth-child(even) {
    /* 样式规则 */
    background-color: #f0f0f0;
}

详细解释

:nth-child(an + b)：
- 这是一个强大的结构性伪类，用于匹配其父元素的第 an + b 个子元素。
- a 是循环的周期，b 是偏移量。
even 关键字：
- even 是 :nth-child() 的一个特殊关键字，等价于 2n。
- 2n 表示 n 取 0, 1, 2, 3… 时，结果为 0, 2, 4, 6, 8…。但由于元素索引从 1 开始，实际匹配的是第 2, 4, 6, 8… 个元素，即偶数序号的元素。
odd 关键字：
- 同理，odd 等价于 2n+1，用于选取奇数序号的元素（1, 3, 5, 7…）。

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选取偶数兄弟元素</title>
    <style>
        .list {
            list-style: none;
            padding: 0;
        }

        /* 选取 .list 下所有偶数位置的 li 元素 */
        .list li:nth-child(even) {
            background-color: #e8f5e8;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>项目 1 (奇数)</li>
        <li>项目 2 (偶数)</li>
        <li>项目 3 (奇数)</li>
        <li>项目 4 (偶数)</li>
        <li>项目 5 (奇数)</li>
        <li>项目 6 (偶数)</li>
    </ul>
</body>
</html>

在这个例子中，”项目 2″、”项目 4″ 和 “项目 6” 会被选中并应用背景色和粗体样式。

其他可行但非最优的方法

:nth-of-type(even)：
- 如果兄弟元素是同一类型（如都是 <li>），nth-of-type 效果与 nth-child 相同。
- 区别：nth-child 是按所有子元素的顺序计算，而 nth-of-type 只计算同类型标签的顺序。
- 示例： html ¨K17K
  - p:nth-child(even)：不匹配任何 <p>（因为 <p> 在第 1 和第 3 位，都是奇数）。
  - p:nth-of-type(even)：匹配“段落 2”（它是第 2 个 <p> 元素）。
- 结论：对于“同组兄弟元素”，通常它们类型相同，nth-child(even) 更通用。如果类型不同且只想选特定类型，才用 nth-of-type。
JavaScript 实现：
- 虽然可以使用 document.querySelectorAll() 配合循环来实现，但这违背了“CSS 如何”和“快速”的要求。CSS 选择器在性能和简洁性上远胜于 JS。

面试加分点

理解 n 的含义：能解释 2n 中的 n 是从 0 开始的整数序列。
与 nth-last-child() 的对比：知道可以从末尾开始计数。
性能意识：强调 CSS 选择器是声明式的，由浏览器高效实现，比 JS 遍历快得多。
兼容性：nth-child 在现代浏览器中支持良好（IE9+）。

总结回答示例

要快速选取同组兄弟元素中的偶数序号元素，应使用 :nth-child(even) 伪类选择器。

它会自动匹配父元素下第 2、4、6、8… 个子元素。

这是最简洁、最高效的方法。如果兄弟元素类型不同且只想选特定标签，可以考虑 :nth-of-type(even)，但在大多数情况下 nth-child(even) 是首选。

THE END

前端 CSS 面试题