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

Question

我在同一容器下有一个元素列表。其中一些具有 A 级，其他具有 B 级。我正在寻找一个 CSS 选择器来选择 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>

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

同时尝试使用 :first-child 将不起作用，因为它只会选择第一个 A 元素，而不会选择第一个 B 元素，也不会选择第一个 A第二组中的元素。

注意事项

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

Answer 1

要选择 ul 元素的第一个子元素，您可以使用 :first-child 伪类。

要选择每组中的第一个元素，您可以使用adjacent sibling selector .

.A + .B 将选择任何紧跟在 A 类元素之后的 B 类元素。类似地，.B + .A 将选择紧跟在 B

类元素之后的 A 类元素

.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>