如何指定CSS类的顺序？ [英] How to specifiy the order of CSS classes?
问题描述
我对CSS和类属性有点困惑。我总是认为，我在属性的值中指定多个类的顺序有意义。后面的类可以/应该覆盖以前的定义，但是这似乎不工作。下面是一个例子：
I'm a little confused about CSS and the class-attribut. I always thought, the order in which I specify multiple classes in the attribut's value has a meaning. The later class could/should overwrite definitions of the previous, but this doesn't seem to work. Here's an example:
<html>
<head>
<style type="text/css">
.extra {
color: #00529B;
border:1px solid #00529B; /* Blue */
background-color: #BDE5F8;
}
.basic {
border: 1px solid #ABABAB;
}
</style>
</head>
<body>
<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>
</body>
</html>
我希望第三个例子是 class =basic extra应该有一个蓝色边框，因为在额外的指定边框将覆盖从基本的边框。
I would expect, the third example with class="basic extra" should have a blue border, since the in extra specified border would overwrite the border from basic.
我在ubuntu 9.04上使用FF 3
I'm using FF 3 on ubuntu 9.04
推荐答案
类属性被覆盖的顺序不是由类在类属性中定义的顺序指定的，而是它们出现在css
The order in which a class' attributes are overwritten is not specified by the order the classes are defined in the class attribute, but instead where they appear in the css
.myClass1 {font-size:10pt;color:red}
.myClass2 {color:green;}
HTML
<div class="myClass2 myClass1">Text goes here</div>
div中的文本将显示为绿色而不是红色，因为myClass2是CSS定义中的下划线我的class1。如果我在类属性中交换类名的排序，没有什么会改变。
The text in the div will appear green and not red because myClass2 is futher down in the CSS definition than my class1. If I were to swap the ordering of the class names in the class attribute, nothing would change.
这篇关于如何指定CSS类的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
