CSS选择一个前面有另一个类的类

Question

阅读CSS 文档我正在尝试为另一个类前面的类创建一个选择器:

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

我需要在.CCCC前面创建一个选择器.BBBB,这里是我的代码:

.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.