css - 在一个规则中使用多个类的目标元素

Question

我有一些 HTML，其中包含具有多个类的元素，我需要在一个规则中分配它们，以便相同的类在不同的容器中可以不同。假设我的 CSS 中有这个:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

然后我的 HTML 中有这个:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

我可以在单个规则中定位这些吗？例如，我知道这是行不通的:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

Answer 1

.border-blue.background { ... } 适用于同时使用两个类的情况。

只针对第一个

<div class="border-blue background"></div>
<div class="border-blue"></div>
<div class="background"></div>

---

.border-blue, .background { ... } 适用于任一类。

以两者为目标

<div class="border-blue"></div>
<div class="background"></div>

---

.border-blue .background { ... } 用于 '.background' 是 '.border-blue' 的 child 。

仅针对第二个“.background”元素

<div class="border-red">
    <div class="background"></div>
</div>
<div class="border-blue">
    <div class="background"></div>
</div>

参见 Chris' answer以获得更详尽的解释。另见 W3 Docs关于 CSS 组合器