相鄰兄弟選擇

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樹上，其兄弟肯定也有。 ）