Question

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

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

Answer 1

可以为div分配多个类。只需在类名中用空格分隔它们：

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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

VS

蓝色最后在css

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果你问他们有相同的属性，那么根据CSS规则，它需要最后一个语句。

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

<强> CSS

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

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

Answer 4

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

Read up on CSS priority了解它是如何运作的。

Answer 5

可以为元素分配许多类，只需用空格分隔它们

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

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

您可以选择look at it all here。

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

5 个答案:

红色最后在css

蓝色最后在css