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

Question

如果我有这个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 解决方案。

Answer 1

您可以使用子组合器选择器 >使用特定父元素定位子元素 - 请参阅下面的演示，其中 #c1 以红色和伪元素为目标。

现在您可以拥有选择器(查看伪如何仅适用于#c1)，但父样式将被继承。所以你必须重新设置样式。 (color: initial 在下面的演示中)

.a.b .c {
  color: initial;
}
.a.b > .c {
  color: red;
}
.a.b > .c:before {
  content: '1. ';
}

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