使用伪类从父元素遍历至第一个子元素未达预期效果

嘿，我一眼就看出问题所在啦！你用的选择器div#container button:first-child之所以没选中目标按钮，核心原因是**:first-child的工作逻辑和你想的不一样**。

为什么原选择器失效？ #

先对照你的DOM结构看：

<div id="container">
  <div id="switcher" class="switcher">
    <h3>Style Switcher</h3> <!-- 这是#switcher的第一个子元素 -->
    <button id="switcher-default"> Default </button>
    ...
  </div>
</div>

button:first-child的意思是：找到一个button，且这个button是它父元素的第一个子元素。但你的目标按钮的父元素是div#switcher，而这个div的第一个子元素是<h3>，不是button，所以这个选择器自然匹配不到任何元素。

正确的几种写法 #

根据你的需求，这里给你几个可行的方案：

1. 最直接的方式：用ID选择器（推荐）

因为ID在页面中是唯一的，直接选中目标元素最高效：

document.querySelector('#switcher-default');

2. 从div#container遍历的正确选择器

如果你一定要从div#container开始遍历，可以用下面两种方式：

• 用:first-of-type匹配同类型的第一个元素：它会忽略父元素中其他类型的子元素，只找第一个button：

  document.querySelectorAll('div#container #switcher button:first-of-type');
  

• 用:nth-child(2)指定位置：因为目标按钮是父元素div#switcher的第二个子元素（第一个是h3）：

  document.querySelectorAll('div#container #switcher button:nth-child(2)');
  

小知识点：:first-child vs :first-of-type #

别再搞混这两个伪类啦：

• :first-child：要求元素是父元素的第一个子元素，不管元素类型。
• :first-of-type：找父元素下同类型元素中的第一个，不管它在父元素里的位置是第几个。

内容的提问来源于stack exchange，提问作者Sami Kh