以这种方式拥有CSS类意味着什么:.class1.class2

Question

我一直在使用Zurb基金会框架

在他们的CSS文件中，我看到了一些我以前从未见过的东西：

.blue.button:hover, .blue.button:focus {
background-color: #0192DD;
}
.nice.blue.button {
border: 1px solid #0593DC;
}
.button:hover, .button:focus {
background-color: #0192DD;
color: white;
}
.blue.button {
background-color: #00A6FC;
}

例如，我非常清楚.blue .button在做什么，但我不知道.blue.button在做什么。谁能向我解释一下？

Answer 1

表示具有所有这些类的元素(例如 <button class="blue button> (。

Answer 2

.blue.button 适用于同时具有类 blue 和 button 的元素，
喜欢<p class="blue button">.

Answer 3

这意味着只有在两个类都在元素上的情况下，才会应用此样式。

<a href="#" class="blue button">Link</a> // will work
<a href="#" class="button">Link</a> // will not work
<a href="#" class="blue">Link</a> // will not work

Answer 4

是的。基本上，该规则仅适用于同时具有两个类的元素。

当您有 .class1, .class2 时，该规则同时适用于具有 class1 的元素和具有 class2 的元素。 .class1.class2 意味着它仅适用于具有 class="class1 class2" 的元素。 .class1 .class2 表示它适用于具有 class2 的元素，该元素被任意嵌套在具有 class1 的元素中。

进一步阅读：CSS2 规范中的类选择器

Answer 5

<div class="item"></div>
<div class="item selected"></div>
<div class="notitem selected"></div>

然后，您可以将所有项目设为红色.项目(颜色：红色(

但只有选定的项目红色/粗体.item.selected{font-weight：bold}

虽然不对其他选定的事情做任何事情......

希望这是有道理的