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，因为＆＃34; a＆＃34;元素c2在内部没有＆＃34; b＆＃34;太。

但是目前c2也在一个更高的父母身上，其中包括＆＃34; a＆＃34;和＆＃34; b＆＃34;所以选择器适用。

请注意，在＆＃34; a＆＃34;之间的链中可能会有更多的父母。和＆＃34; c＆＃34;。我可以在Javascript / jquery中做到这一点，但我喜欢纯CSS解决方案。

Answer 1

您可以使用子组合子选择器>来定位具有特定父元素的子元素 - 请参阅下面的演示，其中#c1的目标是红色＆amp;一个伪元素。

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

＆＃13;

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

＆＃13;

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

＆＃13;