Question

在他们的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的元素中。

进一步阅读：Class selectors in CSS2 specification

Answer 5

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

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

但只有选中的项目为红色/粗体 .item.selected {字体重量：粗体}

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

希望它有意义

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

5 个答案: