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

我有一些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”的子项的一个项目。

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

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> 

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