我对CSS和class属性有点困惑.我一直认为,我在属性值中指定多个类的顺序具有意义.后面的类可以/应该覆盖前一个的定义,但这似乎不起作用.这是一个例子:
<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"应该有一个蓝色边框,因为额外的指定边框将覆盖基本边框.
我在ubuntu 9.04上使用FF 3
Zoi*_*erg 227
类属性被覆盖的顺序不是由类属性中定义的类的顺序指定的,而是它们出现在css中的位置
.myClass1 {color:red;}
.myClass2 {color:green;}<div class="myClass2 myClass1">Text goes here</div>div中的文本将显示为绿色而不是红色,因为myClass2在CSS定义中比我的class1更低.如果我要在类属性中交换类名的顺序,那么什么都不会改变.
Vot*_*ple 26
属性中类的顺序无关紧要.class属性中的所有类都同等地应用于元素.
问题是:样式规则以什么顺序出现在.css文件中.在您的示例中,.basic在此之后.extra,.basic规则将尽可能优先.
如果你想提供第三种可能性(例如,它.basic只是.extra规则应该仍然适用),你.basic-extra可能需要发明另一个类,它可能明确地提供了这个.
小智 5
这是可以做到的，但你必须对选择器有一点创意。使用属性选择器，您可以指定“开头为”、“结尾为”、“包含”等内容。请参阅下面的示例，使用相同的标记，但使用属性选择器。
[class$="extra"] {
color: #00529B;
border:1px solid #00529B;
background-color: #BDE5F8;
}
[class$="basic"] {
border: 1px solid #ABABAB;
}
input {display:block;}<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"/>