CSS選擇由另一個類

Question

閱讀CSS documentation我試圖創建另一個類之前的類的選擇之前類：

<div class="AAAAA"> 
     <div class="CCCC"></div> 
</div> 
<div class="AAAAA"> 
     <div class="BBBB"></div> 
     <div class="CCCC"></div> 
</div> 

我需要建立由.BBBB之前的.CCCC選擇，在這裏我的代碼：

.CCCC { 
    width: 100px; 
    height: 20px; 
    border: 1px solid #000; 
} 

.CCCC~.BBBB { 
    width: 10px; 
    border: 1px solid #000; 
} 

所以在我的實例中，第一與div類CCCC有對子級的100px的寬度，所述第二div與CCCC該ID前面div與BBBB類的寬度應爲10px。

任何想法，爲什麼這不工作？

Answer 1

您需要改變您的訂單。請注意，這會選擇所有.CCCC，屬於.BBBB以下的兄弟姐妹。

.BBBB ~ .CCCC { 
    width: 10px; 
    border: 1px solid #000; 
} 

如果你只想要下單，必須立即跟隨它，那麼這個：

.BBBB + .CCCC { 
    width: 10px; 
    border: 1px solid #000; 
} 

這是有幫助的是要記住，與CSS的現有能力，在最後一個項目你選擇器字符串始終是您實際選擇和應用屬性的項目（如果父項選擇器出現過，則可能不是這樣）。所以你不正確的.CCCC ~ .BBBB應該標記爲不正確，因爲.BBBB是最後一項，但你想改變.CCCC。