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

CSS相邻兄弟选择器+仅能匹配直接相邻的同辈元素。你之前的写法.a .b .c + .a .b .c无效，核心原因是两个.c元素分属不同的.a和.b容器，它们在DOM结构中并非直接相邻的同辈节点，中间隔了多层父级元素，因此选择器无法匹配目标元素。

正确实现方案 #

要达成需求，需先选中相邻的.a容器，再定位其内部的.b .c：

/* 为紧跟在.a后的第二个.a内部的.b .c设置红色背景 */
.a + .a .b .c {
  background-color: red;
}

对应的HTML结构保持不变：

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

原理说明 #

• .a + .a 精准匹配直接相邻的两个同辈.a元素，即DOM中靠后的那个.a容器。
• 后续的.b .c则定位到该容器内部的目标元素，最终实现为第二个嵌套结构里的.c设置样式的效果。

内容的提问来源于stack exchange，提问作者John