如何使用基于嵌套子类的CSS相邻选择器？

Question

我可以像这样使用相邻选择器：

/* When c and c are adjacent, color the second c red */

.c + .c {
  background-color: red;
}

但是当“.c”嵌套时如何做同样的事情？

<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>
<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>

/* Does not work */
.a .b .c + .a .b .c {
  background-color: red;
}

Answer 1

对于相邻选择器

+

，两个选择器必须位于同一级别。

所以它一定是

.a + .a

，因为它们是代码片段中唯一相邻的元素。然后您可以选择第二个

.a

的子代：

.a + .a .b .c

。之后，您可以使用 .a 伪类限制第一个 .b .c

 以确保它也具有后代 

:has()：

'.a:has(.b .c) + .a .b .c'

const target = document.querySelector('.a:has(.b .c) + .a .b .c');

console.log(target);

<div class="a">
  <div class="b">
    <div class="c">1</div>
  </div>
</div>
<div class="a">
  <div class="b">
    <div class="c">2</div>
  </div>
</div>
<div class="c">3</div>