主页 / coding / 问题 / 79139897
Accepted
Hao Wu
Asked: 2024-10-30 14:39:45 +0800 CST

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

  • 772

我偶然发现了这个关于 CSS 选择器的问题。即选择第一次出现的<span>但忽略其层次结构。我知道我可以使用 JavaScript 来document.querySelectorAll('span')获取第一个 DOM 对象并为其分配类。但是有没有办法避免使用 JavaScript 来实现它？

HTML 结构是任意的，因此像这样的选择器div:first-child > p:first-of-type > div:first-of-type span:first-of-type太具体了。我希望选择器即使在 HTML 结构改变时也能正常工作。

我曾经尝试过类似的事情，但我不确定为什么MISS ME 4也被选中。

span:first-of-type:not(:has(span):nth-child(n+2 of :has(span)) span) {
  color: red;
  font-weight: bold;
}
<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>

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

css

2 个回答

  1. Best Answer

    要选择文档中的第一个跨度，请选择跨度元素：

    • 前面没有同级 span 元素
    • 前面没有包含 span 元素的兄弟元素
    • 没有作为 span 元素的祖先
    • 没有其祖先元素之前有同级 span 元素
    • 没有包含 span 元素的兄弟元素作为其祖先

    使用：

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


    span:not(span ~ span):not(:has(span) ~ span):not(span span):not(span ~ * span):not(:has(span) ~ * span) {
  color: red;
  font-weight: bold;
}
    <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>

    • 4

  2. 一个更通用的版本也应该适用于类：

    .target { /* update what you want to select here (class, tag, etc) */
  &:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *) {
    border-color: red;
  }
}

div {
  padding-inline: 15px;
}
.target {
  border: 3px solid blue;
}
    <div>Some content</div>
<div class="target">
  <div>Some content</div>
  <div>
    <div class="target">Some content</div>
    <div>Some content</div>
    <div class="target">Some content</div>
  </div>
  <div>Some content</div>
  <div>Some content</div>
</div>
<div class="target">
  <div>Some content</div>
  <div>Some content</div>
</div>
<div>
  <div class="target">Some content</div>
  <div class="target">Some content</div>
</div>
<div>
  <div class="target">
    <div class="target">Some content</div>
    <div>Some content</div>
  </div>
  <div>
    <div>Some content</div>
    <div class="target">Some content</div>
    <div>Some content</div>
  </div>
  <div class="target">
    <div>Some content</div>
    <div class="target">Some content</div>
    <div>Some content
      <div>Some content</div>
      <div class="target">Some content</div>
    </div>
    <div>
      <div>
        <div>
          <div>Some content</div>
          <div>Some content</div>
          <div>Some content</div>
        </div>
      </div>
    </div>
    <div class="target">
      <div class="target">Some content</div>
      <div>Some content</div>
      <div>Some content</div>
    </div>
  </div>

    应用于你的例子：

    span { 
  &:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *)  {
    color: red;
    font-weight: bold;
  }
}
    <div>
  <h1>Select the first occurrence of span</h1>
  <p>
    <span>HIT ME</span>
    <span>
      <span>MISS ME 1</span>
      <span>MISS ME 2</span>
      <span>MISS ME 3</span>
    </span>
    <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>
    <span>
      <span>MISS ME 15</span>
      <span>MISS ME 16</span>
      <span>MISS ME 17</span>
    </span>
  </p>
</div>

    • 3

相关问题