相邻的兄弟选择器具有封闭类的特异性

Question

我有这个DOM:

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

我想要这个css规则:

.b + .c { margin-left: 220px; }

但只在课堂上 a

我希望像这样的东西能奏效,但没有运气.

.a .b + .a .c {}

有谁知道这是否可能？

Answer 1

请改用此选择器:

.a .b + .c {
    margin-left: 220px;
}

...或者.a > .b + .c,如果您希望规则仅应用于.a容器的子容器,而不是应用于其所有后代.

演示.

现在解释部分.如CSS规范中所定义,每个带+符号的选择器都被视为选择器链:

由单个简单选择器组成的选择器匹配满足其要求的任何元素.将简单的选择器和组合子预先添加到链中会产生额外的匹配约束,因此选择器的主体始终是与最后一个简单选择器匹配的元素的子集.

现在分析你开始使用的表达式:

.a .b + .a .c

根据规格,这实际上被视为......

((.a .b) + .a) .c

换句话说,应用选择器......

• 所有的.c元素,...
• ......有.a元素作为他们的祖先,...
• ......有.b元素作为他们的兄弟姐妹,...
• ..........有.a元素作为他们的祖先.

此选择器将匹配.c此HTML 中的元素:

<div class="a">
  <div class="b"></div>
  <div class="a">
    <div class="c">This is matched</div>
  </div>
</div>

但是,在你的情况下,你不必检查.c祖先 - 它只够检查.b(它的前一个兄弟).如果它.b有.a它的DOM树,它的兄弟肯定也有它.)