为何~ :first-of-type选择器未按预期工作？querySelector疑问

核心问题出在:first-of-type的匹配逻辑上——它是相对于元素的父元素来判断的，而不是相对于~筛选后的同级元素集合。

具体分析： #

• p + p的逻辑很直接：匹配紧接在某个<p>后面的第一个同级<p>，只要页面存在相邻的两个<p>就能找到目标元素。
• 而p ~ p:first-of-type的逻辑是：先找所有被同级<p>跟随的<p>（也就是父元素中第一个<p>之后的所有<p>），再在这些里面找父元素下的第一个<p>。但父元素的第一个<p>前面根本没有其他同级<p>，自然不满足p ~ p的前置条件，所以最终匹配不到任何元素，返回null。

举个实际的HTML结构例子：

<div>
  <p>第一个p</p>
  <p>第二个p</p>
  <p>第三个p</p>
</div>

• querySelector("p + p")会选中「第二个p」，符合预期。
• querySelector("p ~ p:first-of-type")试图找父元素的第一个<p>（也就是「第一个p」），但它前面没有其他<p>，不满足p ~ p的要求，所以返回null。

正确的写法 #

如果想获取p ~ p集合里的第一个元素，直接用querySelector("p ~ p")即可——因为querySelector本身就会返回匹配到的第一个元素，不需要额外加:first-of-type。

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