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

我有一些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); } 

.border-blue.background { ... }是一个具有多个类的项目。
.border-blue, .background { ... }用于多个项目,每个项目都有自己的类别。
.border-blue .background { ... }是“.background”是“.border-blue”的子项的一个项目。

见克里斯的答案更彻底的解释。

为了防止有人像我这样做,没有意识到,这两个变化是针对不同的使用情况。

下列:

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

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