css - 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;
}

因此，在我的示例中，第一个divwithCCCC类的宽度应为100px，第二个div以CCCC该 id 开头的divwith 类BBBB的宽度应为10px。

知道为什么这不起作用吗？

score 17 · Accepted Answer

您需要反转您的订单。请注意，这将选择所有.CCCC在.BBBB.

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

如果你只想要下一个，它必须立即跟随它，那么这个：

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

记住，在 CSS 的当前功能下，选择器字符串中的最后一项始终是您实际选择并将属性应用到的项（如果出现父选择器，那么可能不会是这样）。因此，您的不正确.CCCC ~ .BBBB应该将您标记为不正确，因为这.BBBB是最后一项，但您想要更改.CCCC.

1 回答 1