Html 将CSS选择器限制为最近的父级

如果我有这个DOM结构

<div class="a b">
  <div class="c" id="c1">
    <div class="a">
      <div class="c" id="c2">
      </div>
    </div>
  </div>
</div>

我想创建一个选择器，如

.a.b.c{…}

它只适用于id=c1，而不适用于id=c2，因为c2中的“a”元素也没有“b”

但目前c2也在一个更高的父级中，该父级具有“a”和“b”，因此选择器适用

请注意，在“a”和“c”之间的链中可能有更多的父项。

---

我可以在Javascript/jquery中实现这一点，但我想要一个纯CSS解决方案。

您可以使用子组合器选择器将子元素与特定的父元素组合在一起-请参阅下面的演示，其中以红色和伪元素为目标的

#c1

现在您可以使用选择器（请参见pseudo如何仅应用于

#c1

），但父样式将被继承。因此，您必须重置样式。（

color:initial

在下面的演示中）

.a.b.c{
颜色：首字母；
}
.a.b>.c{
颜色：红色；
}
.a.b>.c:之前{
内容:"一";；
}

一
二

有关选择器的更多信息，包括示例：