在一个规则中，目标元素具有多个类

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 { ... } 用于具有多个类的一项。
.border-blue, .background { ... } 用于具有自己的类的多个项。
.border-blue .background { ... } 用于其中 '.background' 是 ' 的子项的一项.border-blue'。

请参阅Chris' answer 以获得更详尽的说明。

Answer 2

以防万一有人像我一样偶然发现但没有意识到，以上两种变体适用于不同的用例。

以下内容：

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

所以基本上这样想，逗号分隔适用于具有一个类或另一个类的元素，点分隔适用于具有一个类和另一个类的元素。