Class 当两个类分配给一个div时，类否决

我正在创建一个

标记，我想为一个

标记应用两个类，这将是一个缩略图库。一类是因为它的地位，另一类是因为它的风格。这样我就可以运用这种风格，我得到了一些奇怪的结果，这让我产生了一个问题

---

可以将两个类分配给

标记吗？如果是这样的话，哪一个否决了另一个或哪一个具有优先级？

如果没有其他应用，则CSS中最后定义的类具有优先级

---

要查看它是如何工作的。

可以将许多类分配给一个元素，您只需用空格分隔它们

由于CSS中的级联，最靠近文档底部的覆盖规则将应用于元素

所以如果你有

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

将使用红色，但不会使用背景色，因为它未被覆盖

您还必须考虑CSS的特殊性，如果您有更具体的选择器，则将使用此选择器：

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

这里将使用第二个选择器，因为它更具体

---

您可以选择一个分区。

可以将多个类分配给一个分区。只需在类名中用如下空格分隔它们：

<div class="rule1 rule2 rule3">Content</div>

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

然后，因为两个规则都匹配div，并且具有完全相同的CSS特性，所以第二个规则稍后出现，因此它将具有优先级，并且背景将为红色

---

如果一条规则具有更高的CSS特异性（

div.rule1

分数高于

.rule2

）：

然后，它将优先，这里的背景色将是绿色

---

如果这两条规则不冲突：

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

---

然后，这两个规则都将被应用。

如果您询问它们是否具有相同的属性，那么根据CSS规则，将使用最后一条语句

<div class="red green"></div>

---

根据上面的例子，它是根据css树的最后一个语句，它是.green

实际上，css中最后定义的类应用于您的div

请查看：

css中的红色最后一个

.blue{color:blue；}
.red{color:red；}

蓝红色
红蓝

+1解释CSS特殊性的另一个很好的链接：如果我没有弄错，我认为下面的答案更正确？@nagates-你认为哪个答案更正确，为什么？下面有很多答案，所以我不知道你指的是哪一个，也不知道你为什么认为它“更正确”。如果你能解释你的想法，我很乐意改进或澄清我的答案。jfriend00：下面@erez sason的答案就是他所指的答案。这很奇怪，因为我认为它像你所概述的那样工作，但他的例子显然是按照他所描述的方式工作的。我想知道嵌入样式和链接样式之间是否有区别。@AdamMcCormick-我的答案已经包含来自该答案的信息，作为我提供的示例之一：那么，由于两个规则都匹配div，并且具有完全相同的CSS特性，然后第二条规则将在稍后出现，因此它将具有优先权，并且背景将为红色。。我展示了几个可能的场景，并解释了所有场景，而不仅仅是一个场景。OP并不是针对他们的代码的，所以我选择了涵盖多个选项并包括最简单选项的一般性解释。投票选出了有史以来最好的类名（以及完整和准确的类名），你是说在实际CSS中物理上是最后一个吗，或者列表中的最后一个类名？他指的是所有CSS规则列表中的最后一个，而不是属性列表中的顺序，不幸的是对于那些使用JavaScript类列表方法的人来说，在我看来，他们会发现这个设计决策令人惊讶且毫无帮助。这是一个更好的答案。公认的答案具有误导性。

<div class="red green"></div>

.red{
 color:red;
}
.green{
 color:green;
}