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

Question

我正在创建一个 <div>我想在其中为 <div> 应用两个类的标签标签，这将是一个缩略图库。一类是根据其位置，另一类是根据其样式。这样我就可以应用这种风格，我得到了一些奇怪的结果，这让我产生了一个问题。

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

Answer 1

可以将多个类分配给一个 div。只需在类名中用这样的空格将它们分开:

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

此 div 然后将匹配三个不同类选择器的任何样式规则:.rule1、.rule2 和 .rule3。

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

如果冲突规则的 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;
}

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