当两个类分配给一个div时,class overrule

Question

我正在创建一个<div>标签,其中我想为<div>标签应用两个类,这将是一个缩略图库.一个类别的位置和另一个类的风格.这样我可以应用这种风格,我有一些奇怪的结果,这让我有了一个问题.

可以将两个类分配给<div>标记吗？如果是这样,哪一个否决了另一个或哪一个优先？

Answer 1

可以将多个类分配给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;
}

然后,将应用这两个规则.

Answer 2

实际上,在css中最后定义的类 - 应用于你的div.

看看这个:

红色最后在css

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

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

VS

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

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