将两个班级分配给一个div时，班级否决

我正在创建一个<div>标签，在该标签中，我想为<div>标签应用两个类，这将是一个缩略图库。一类代表其位置，另一类代表其风格。这样我可以应用样式，结果有些奇怪，这使我产生了疑问。

可以给<div>标签分配两个类别吗？如果是这样，哪一个优先于另一个？或者哪个优先？

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

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

那么这个div将匹配任何样式规则为三个不同的类选择：.rule1，.rule2和.rule3。

CSS规则会按照在样式表中遇到它们的选择器的顺序应用于匹配其选择器的页面中的对象，并且如果两个规则之间存在冲突（多个规则试图设置相同的属性），则CSS特异性确定哪个规则规则优先。

如果冲突规则的CSS特殊性相同，则优先使用后者（在样式表或稍后的样式表中定义的样式）。类名称在对象本身上的顺序无关紧要。如果CSS特异性相同，那么样式表中样式规则的顺序就很重要。

因此，如果您具有以下样式：

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

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

如果某条规则具有更高的CSS特异性（div.rule1得分高于.rule2）：

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

然后，它将具有优先权，并且此处的背景色将为绿色。

如果这两个规则不冲突：

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

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

实际上，在CSS中最后定义的类-应用于您的div。

一探究竟：

红色最后的CSS

.blue{ color: blue; }
.red { color: red;  }

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

与

蓝色最后的CSS

.red { color: red;  }
.blue{ color: blue; }

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

如果您询问它们是否具有相同的属性，则按照CSS规则，使用最后一条语句。

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

的CSS

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

按照上面的示例，它采用css树的最后一条语句，即.green。

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

阅读CSS优先级以了解其工作原理。

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

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

由于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;
}

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

您可以在这里查看所有内容。