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

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-childether也是行不通的，因为它只会选择第一个A元素，而不会选择第一个B元素，也不会选择第二组中的第一个A元素。

笔记

我不相信这是“ CSS 选择器第一个元素与类”的重复。

Answer 1

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

要选择每个组中的第一个元素，可以使用相邻同级选择器。

.A + .B将选择B紧跟在 class 元素后面的任何 class 元素A。同样，.B + .A将选择A紧跟在具有 class 的元素之后的任何具有 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>