Html 如何指定 CSS 类的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1321692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to specify the order of CSS classes?
提问by Tim Büthe
I'm a little confused about CSS and the classattribute. 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:
我对 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>
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.
我希望，第三个例子class="basic extra"应该有一个蓝色边框，因为额外指定的边框会覆盖基本的边框。
I'm using FF 3 on ubuntu 9.04
我在 ubuntu 9.04 上使用 FF 3
回答by Zoidberg
The order in which the attributes are overwritten is not determined by the order the classes are defined in the classattribute, but instead where they appear in the CSS.
属性被覆盖的顺序不是由类在class属性中定义的顺序决定的，而是由它们在 CSS 中出现的位置决定的。
.myClass1 {color:red;}
.myClass2 {color:green;}<div class="myClass2 myClass1">Text goes here</div>The text in the divwill appear green, and not red; because .myClass2is further down in the CSS definition than .myClass1. If I were to swap the ordering of the class names in the classattribute, nothing would change.
中的文本div将出现green，而不是red；因为.myClass2在 CSS 定义中比.myClass1. 如果我要交换class属性中类名的顺序，什么都不会改变。
回答by VoteyDisciple
The order of classes in the attributeis irrelevant. All the classes in the classattribute are applied equally to the element.
属性中类的顺序无关紧要。class属性中的所有类都同等地应用于元素。
The question is: in what order do the style rulesappear in your .css file. In your example, .basiccomes after .extraso the .basicrules will take precedence wherever possible.
问题是：样式规则以什么顺序出现在 .css 文件中。在您的示例中，.basic紧随其后，.extra因此.basic规则将尽可能优先。
If you want to provide a third possibility (e.g., that it's .basicbut that the .extrarules should still apply), you'll need to invent another class, .basic-extraperhaps, which explicitly provides for that.
如果您想提供第三种可能性（例如，它是.basic但.extra规则仍然适用），您.basic-extra可能需要发明另一个明确规定的类。
回答by TravisV
This can be done, but you have to get a little creative with your selectors. Using attribute selectors, you can specify things like "begins with", "ends with", "contains", etc. See example below using your same markup, but with attribute selectors.
这可以做到，但您必须对选择器发挥一点创意。使用属性选择器，您可以指定诸如“开始于”、“结束于”、“包含”等内容。请参阅下面的示例，使用相同的标记，但使用属性选择器。
[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"/>