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

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容器的子容器，而不是应用于其所有后代。

Demo

现在解释部分。根据{{​​3}}中的定义，每个带有+符号的选择器都被视为选择器链：

  

由单个简单选择器组成的选择器匹配任何元素   满足其要求。预先设置一个简单的选择器和   组合链到一个链上会产生额外的匹配约束，所以   选择器的主题总是匹配的元素的子集   最后一个简单的选择器。

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

.a .b + .a .c

根据规范，这实际上被视为......

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

换句话说，应用了选择器......

• 到所有.c元素，其中......
• ......有.a个元素作为他们的祖先，其中......
• ......有.b个元素作为他们的先前兄弟姐妹，其中......
• ..........有.a个元素作为他们的祖先。

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

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

但是，在您的情况下，您不必检查.c祖先 - 仅足以检查.b（其先前的兄弟姐妹）。如果.b的DOM树有.a，那么兄弟肯定也有。 ）