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>

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

Answer 2

.border-blue.background { ... }适用于包含多个班级的一个项目 .border-blue, .background { ... }适用于多个项目，每个项目都有自己的类别 .border-blue .background { ... }用于一个项目，其中'。background'是'.border-blue'的子项。

有关详细说明，请参阅Chris' answer。

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

2 个答案: