如何指定CSS类的顺序? [英] How to specify the order of CSS classes?
问题描述
我对CSS和 class
属性有点困惑。我一直认为,我在属性值中指定多个类的顺序是有意义的。后面的课可以/应该覆盖前面的定义,但这似乎不起作用。以下是一个例子:
< html>
< head>
< style type =text / css>
.extra {
color:#00529B;
border:1px solid#00529B; / *蓝色* /
背景颜色:#BDE5F8;
}
.basic {
border:1px solid #ABABAB;
}
< / style>
< / head>
< body>
< input type =textvalue =basicclass =basic/>
< input type =textvalue =extraclass =extra/>
< input type =textvalue =basic extraclass =basic extra/>
< input type =textvalue =extra basicclass =extra basic/>
< / body>
< / html>
我想,第三个例子是 class =basic extra
应该有蓝色边框,因为额外指定的边框会覆盖基本边框。
我在ubuntu 9.04上使用FF 3
顺序类的属性被覆盖的顺序不是由class属性中的类定义的顺序来指定的,而是它们出现在css中的位置
.myClass1 {font-size:10pt; color:red}
.myClass2 {color:green;}
HTML
< div class =myClass2 myClass1>文字在这里< / DIV>
I'm a little confused about CSS and the class
attribute. I always thought, the order in which I specify multiple classes in the attribute 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>
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.
I'm using FF 3 on ubuntu 9.04
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>
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屋!