相邻兄弟选择

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。

现在的解释部分。如图CSS spec所定义，与+符号每选择被视为选择器链：

由单个简单选择器的选择器满足其要求的任何元素 匹配。将一个简单的选择器和一个简单的选择器添加到链中会施加额外的匹配约束，因此选择器的主体始终是与最后一个简单选择器匹配的元素的子集。

现在，我们来分析表达你已经开始：

.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已将其.a注册到其DOM树上，其兄弟肯定也有。 ）