我正在创建一个< div>标签,其中我想应用两个类为< div>标签,它将是一个缩略图库。一个班级的职位和另一个班级的风格。这样我可以应用风格,我有一些奇怪的结果给我带来了一个问题。
可以将两个类分配给< div>标签?如果是,哪一个推翻另一个或哪个优先?
解决方法
可以将多个类分配给一个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; }
那么这两个规则都将被应用。