选择第一个出现的标签，但使用 CSS 忽略层次结构

Question

我偶然发现了这个关于 CSS 选择器的问题。即选择第一次出现的

<span>

但忽略其层次结构。我知道我可以使用 JavaScript 来获取第一个 DOM 对象并为其分配类。但有没有办法避免使用 JavaScript 来实现它？HTML 结构是任意的，因此像

document.querySelectorAll('span')

这样的选择器过于具体。我希望即使 HTML 结构发生更改，选择器也能正常工作。

我尝试过类似的操作，但我不确定为什么也选择了

div:first-child > p:first-of-type > div:first-of-type span:first-of-type

。

MISS ME 4

span:first-of-type:not(:has(span):nth-child(n+2 of :has(span)) span) {
  color: red;
  font-weight: bold;
}

这可能吗？我完全没有主意了。

Answer 1

前面没有同级跨度元素

• 前面没有包含 span 元素的同级元素
• 没有前面有同级 span 元素的祖先 = 没有前面有包含 span 元素的同级元素的祖先
用途：

<div>
  <h1>Select the first occurrence of span</h1>
  <p>
    <span>HIT ME</span>
    <div>
      <span>MISS ME 1</span>
      <span>MISS ME 2</span>
      <span>MISS ME 3</span>
    </div>
    <span>MISS ME 4</span>
    <span>MISS ME 5</span>
  </p>
  <p>
    <span>MISS ME 6</span>
    <span>MISS ME 7</span>
  </p>
</div>
<div>
  <p>
    <span>MISS ME 7</span>
    <span>MISS ME 8</span>
  </p>
  <p>
    <span>MISS ME 9</span>
    <span>MISS ME 10</span>
    <span>MISS ME 11</span>
  </p>
  <p>
    <span>MISS ME 12</span>
    <span>MISS ME 13</span>
    <span>MISS ME 14</span>
    <div>
      <span>MISS ME 15</span>
      <span>MISS ME 16</span>
      <span>MISS ME 17</span>
    </div>
  </p>
</div>

span:not(span ~ span):not(:has(span) ~ span):not(span ~ * span):not(:has(span) ~ * span)

span:not(span ~ span):not(:has(span) ~ span):not(span ~ * span):not(:has(span) ~ * span) {
  color: red;
  font-weight: bold;
}