CSS 选择器 - 在一组相同的 class 中具有 Class 的第一个元素

Question

我在同一容器下有一个元素列表。其中一些有 class A，其他有 class B。我正在寻找 CSS select 或 select A 组中的第一个 A 元素和 B 组中的第一个 B 元素。

示例：

    <style>
    .A { background: red; }
    .B { background: blue; }
    </style>
    <ul class="list">
      <li class="item A">AAA</li><!-- I want to select this -->
      <li class="item A">aaa</li>
      <li class="item A">aaa</li>
      <li class="item B">BBB</li><!-- I want to select this -->
      <li class="item B">bbb</li>
      <li class="item B">bbb</li>
      <li class="item A">AAA</li><!-- I want to select this -->
      <li class="item A">aaa</li>
      <li class="item A">aaa</li>
    </ul>

请注意，使用伪 select 或 :first-of-type 将不起作用，因为它将 select 没有组关系的类型的第一个元素。

同样尝试使用 :first-child 将无法工作，因为它只会 select 第一个 A 元素，而不会 select 第一个 B 元素，它也不会select 第二组中的第一个 A 元素。

备注

我不认为这是“CSS selector for first element with class”的重复。

Answer 1

到select第一个子元素ul，可以使用:first-child伪class.

到select每组的第一个元素，可以使用adjacent sibling selector。

.A + .B 将 select 任何带有 class B 的元素紧跟在带有 class A 的元素之后。类似地，.B + .A 将 select 任何带有 class A 的元素紧跟在带有 class B

的元素之后

.A { background: red; }
.B { background: blue; }

.A:first-child,
.B + .A,
.A + .B {
  background: yellow;
}

<ul class="list">
  <li class="item A">AAA</li><!-- I want to select this -->
  <li class="item A">AAA</li>
  <li class="item A">AAA</li>
  <li class="item B">BBB</li><!-- I want to select this -->
  <li class="item B">BBB</li>
  <li class="item B">BBB</li>
  <li class="item A">AAA</li><!-- I want to select this -->
  <li class="item A">AAA</li>
  <li class="item A">AAA</li>
</ul>

Answer 2

如果您不知道每个 class 名称是什么（例如，在抓取时），您可以使用 JS 来查找符合您条件的组：

let list = document.querySelector('.list');


let filtered = [...list.children].filter((item) => {
  let previous = item.previousElementSibling;
  return !previous || [...previous.classList].join('.') !== [...item.classList].join('.');
});

console.log(filtered);

.A {
  background: red;
}

.B {
  background: blue;
}

<ul class="list">
  <li class="item A">First AAA</li>
  <!-- I want to select this -->
  <li class="item A">AAA</li>
  <li class="item A">AAA</li>
  <li class="item B">First BBB</li>
  <!-- I want to select this -->
  <li class="item B">BBB</li>
  <li class="item B">BBB</li>
  <li class="item A">Second AAA</li>
  <!-- I want to select this -->
  <li class="item A">AAA</li>
  <li class="item A">AAA</li>
</ul>

您还可以将您的条件限制为共享其标签名称的元素组。

CSS 选择器 - 在一组相同的 class 中具有 Class 的第一个元素

CSS Selector - first element with Class in a group of same class

css

css-selectors

pseudo-class

备注