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。