94

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

可以将两个类分配给一个<div>标签吗?如果是这样,哪一项优先于另一项或哪一项具有优先权?

4

5 回答 5

169

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

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

于 2012-09-04T07:27:23.273 回答
35

实际上,最后在 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>

于 2015-04-17T09:29:28.037 回答
4

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

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

CSS

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

根据上面的示例,它根据 css 树采用最后一条语句,即.green

于 2012-09-04T07:27:28.790 回答
3

如果没有其他条件,CSS 中最后定义的类具有优先权。

阅读 CSS 优先级以了解它是如何工作的。

于 2012-09-04T07:26:45.133 回答
3

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

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

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

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

于 2012-09-04T07:27:19.553 回答