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

Question

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

<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的{​​{1}} CCCC，其前面带有div类BBBB的{​​{1}}宽度应为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。