querySelector 的默认作用域与 :scope 伪类

在这篇文章中，我们将系统地回顾如何在 CSS 和 JavaScript 中选中父容器的第 2 个子元素，重点剖析 :nth-child()、:nth-of-type() 与 :scope 三大伪类的差异及其在 querySelector 中的正确用法，并给出最佳实践示例。

摘要

• :nth-child(n) 根据元素在所有兄弟节点中的位置进行匹配（计数包括任意类型的子节点） (nth-child() - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla)。
• :nth-of-type(n) 则只在同类型元素之间计数，更加稳健（只统计相同标签名的兄弟节点） (nth-of-type() - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla)。
• 在 JavaScript 中，document.querySelector(':nth-child(2)') 会在全局或当前上下文中找到第一个”在其父元素中排名第二”的元素，但不保证是指定容器的直接第 2 个子元素 (Element: querySelector() method - Web APIs | MDN)。
• 正确方案是对目标容器调用 element.querySelector(':scope > :nth-child(2)')，其中 :scope 明确将匹配限定在当前元素，> 表示只匹配直系子节点 (scope - CSS: Cascading Style Sheets - MDN Web Docs, Element: querySelectorAll() method - Web APIs | MDN)。
• 最直观的替代写法是直接使用 DOM API：element.children[1]（下标从 0 开始） (Element: querySelectorAll() method - Web APIs | MDN)。

---

CSS 伪类：:nth-child() vs :nth-of-type()

:nth-child() 的工作原理

• :nth-child(n) 按照父元素的子节点列表顺序进行计数，所有类型的节点都参与排名，索引从 1 开始 (nth-child() - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla)。
• 常见用法包括数字（如 :nth-child(2)），关键字 odd/even，以及公式 An+B（如 2n+1，表示所有奇数位） (nth-child() - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla)。

:nth-of-type() 的优势

• :nth-of-type(n) 仅在同类型（标签名相同）的兄弟节点中进行计数，过滤掉中间不同标签的干扰，更适合”选中第 n 个段落””第 n 行表格”等场景 (nth-of-type() - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla)。
• 在 DOM 结构频繁变化或含插入元素时，:nth-of-type() 通常比 :nth-child() 更不易出错 (The Difference Between :nth-child and :nth-of-type - CSS-Tricks)。

---

querySelector 的默认作用域与 :scope 伪类

querySelector 在 Element 与 Document 上的差异

• Document.querySelector(selector) 返回文档中第一个匹配 selector 的元素 (Document: querySelector() method - Web APIs | MDN)。
• Element.querySelector(selector) 则在该元素的整个子树（所有后代）中查找第一个匹配项，同样不限制深度，也不限定仅直系子节点 (Element: querySelector() method - Web APIs | MDN)。

为什么需要 :scope

• 默认情况下，querySelectorAll() 与 querySelector() 在 Element 上调用时，选择器仍会匹配整个后代树，而不是仅限直系子节点。要限定作用域，必须在选择器前加上 :scope (Element: querySelectorAll() method - Web APIs | MDN)。
• :scope 伪类在选择器中代表当前正在调用 querySelector 的元素本身，使得随后使用的子选择符（如 > ...）都从该元素开始计算 (scope - CSS: Cascading Style Sheets - MDN Web Docs)。

---

实战：选中容器的第 2 个子元素

方法一：纯 CSS（只在样式表中）

/* 仅在样式表中：选中 parent-container 的第2个 div 直系子元素 */
.parent-container > div:nth-child(2) {
  /* 样式规则 */
}

方法二：JavaScript + :scope

// 获取目标容器
const feed = document.querySelector('[role="feed"]');
// 选中其第2个直系子元素
const secondChild = feed.querySelector(':scope > :nth-child(2)');

• :scope 保证 > 之后的 :nth-child(2) 只在 feed 的直接子节点里生效，而不会误匹配深层嵌套的节点 (scope - CSS: Cascading Style Sheets - MDN Web Docs, Element: querySelectorAll() method - Web APIs | MDN)。

方法三：DOM API（最简洁）

const feed = document.querySelector('[role="feed"]');
// children 返回仅直系子元素的集合，索引从0开始
const secondChild = feed.children[1];

• children 返回 HTMLCollection，它只包含 Element 类型的直系子节点，不含文本或注释节点，读取速度也更快 (Element: querySelectorAll() method - Web APIs | MDN)。

---

小结与规范建议

1. 选中同类型的第 n 个元素：优先使用 :nth-of-type(n)；
2. 选中所有类型的第 n 个子元素：使用 :nth-child(n)；
3. 在 JS 中严格限定父容器范围：在 querySelector 内部请加上 :scope，并使用子选择符 >；
4. 性能和可读性：若仅需获取元素节点，element.children[ index ] 简洁高效。

通过正确理解各伪类计数范围及 querySelector 的作用域，你可以在开发复杂布局或动态脚本时，既保证选择器的准确性，又提升代码可维护性。