在一个规则中将具有多个类的元素作为目标

我有一些具有多个类的元素的 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);
}

136697

小开

为了防止有人像我一样偶然发现这个问题而没有意识到，上面的两个变体适用于不同的用例。

以下内容:

.blue-border, .background {
border: 1px solid #00f;
background: #fff;
}

当您希望向具有蓝色边框或背景类的元素添加样式时，例如:

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

都会得到一个蓝色的边框和白色的背景应用到他们。

然而，公认的答案是不同的。

.blue-border.background {
border: 1px solid #00f;
background: #fff;
}

这将样式应用于具有两个类的元素，因此在本例中，只有具有两个类的 <div>应该得到应用的样式(在正确解释 CSS 的浏览器中) :

<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>

基本上可以这样想，逗号分隔应用于 一个班或另一个班元素，点分隔应用于 一个班和另一个班元素。