我正在创建一个<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。
看看这个:
.blue{ color: blue; }
.red { color: red; }
<div class="blue red">blue red</div>
<div class="red blue">red blue</div>
对比
.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;
}
这里将使用第二个选择器,因为它更具体。
您可以在这里查看所有内容。