如何指定CSS类的顺序？

113

我对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

html css

— 蒂姆·布特
source

246

属性被覆盖的顺序不是由类在class属性中定义的顺序决定的，而是由它们在CSS中出现的位置决定的。

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

展开摘要

div遗嘱中的文字会出现green，而不是red; 因为.myClass2CSS定义比.myClass1。如果我要交换class属性中类名称的顺序，则不会发生任何变化。

— 佐德伯格
source

14

我不明白为什么他们会这样实现。有趣的是，这也是我对CSS可以做的大多数其他事情的看法。

— byxor

@因为规则是级联的。他们从上到下，从左到右应用表格。对我来说很有意义

— 9

27

属性中类的顺序无关紧要。class属性中的所有类均等地应用于元素。

问题是：样式规则以什么顺序出现在.css文件中。在您的示例中，.basic是紧随其后的，.extra因此.basic规则将尽可能优先。

如果您想提供第三种可能性（例如，.basic但该.extra规则仍应适用），则.basic-extra可能需要发明另一个类，为它提供明确的条件。

— 投票信徒
source

3

可以做到这一点，但是您必须在选择器上有所创造。使用属性选择器，可以指定诸如“开始于”，“结束于”，“包含”等内容。请使用相同的标记，但使用属性选择器，参见下面的示例。

[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"/>

展开摘要

— 特拉维斯
source