在一个规则内定位具有多个类的元素

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

如果有人偶然发现这个并且没有意识到,上面的两个变体是针对不同的用例.

下列:

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

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

Answer 2

.border-blue.background { ... }是一个具有多个类的项目.
.border-blue, .background { ... }适用于多个项目,每个项目都有自己的类.
.border-blue .background { ... }是'.background'是'.border-blue'的孩子的一个项目.

请参阅Chris的回答以获得更详尽的解释.