如何利用已缓存选择器，正确使用querySelector()的直接子元素选择？

问题原因 #

你之前用L1.querySelector('div:nth-child(2)')错选了孙子辈元素，是因为这个写法会匹配L1所有后代里符合条件的div，而非仅直接子元素。

可行解决方案 #

不用重复写冗长的L1完整选择器，依托已缓存的L1元素就能实现直接子元素选择，几种实用方法如下：

• 直接用>开头的子选择器（现代浏览器首选）
  Chrome、Firefox、Edge等主流浏览器都支持在已缓存元素的querySelector中使用>开头的选择器，直接匹配当前元素的直接子元素：

  const L3 = L1.querySelector('> div:nth-child(2)');
  

• 用children属性（高效直观）
  如果L1的直接子元素都是div，或者你明确目标是第2个直接子元素，用children更高效，兼容性拉满：

  const L3 = L1.children[1]; // children是类数组，索引从0开始，第2个元素对应索引1
  

• 用:scope伪类（兼容复杂场景）
  若需要更复杂的选择逻辑，或要确保上下文明确，用:scope伪类指定当前元素为选择根：

  const L3 = L1.querySelector(':scope > div:nth-child(2)');
  

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