代码之家 › 专栏 › 技术社区 › Tim Büthe

如何指定CSS类的顺序?

css html

Tim Büthe · 技术社区 · 15 年前

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

3 回复 | 直到 6 年前

212

Sumit Bohemian 6 年前

类的属性被覆盖的顺序不是由类在类属性中定义的顺序指定的,而是由类在CSS中出现的位置指定的。

.myClass1 {font-size:10pt;color:red}
.myClass2 {color:green;}

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

DIV中的文本将显示为绿色而不是红色,因为在CSS定义中,MyClass2比我的Class1还要低。如果要交换class属性中类名的顺序,则不会发生任何更改。

VoteyDisciple 15 年前

课程顺序 在属性中 是无关的。中的所有类 class 属性同样应用于元素。

问题是:按什么顺序 风格规则 出现在.css文件中。在你的例子中, .basic 来后 .extra 所以 基本 规则将尽可能优先。

如果你想提供第三种可能性(例如 基本 但那 额外的 规则仍然适用),你需要发明另一个类, .basic-extra 也许,它明确规定了这一点。

TravisV 6 年前

这可以做到,但是你必须对你的选择器有一点创意。使用属性选择器,可以指定诸如“开始于”、“结束于”、“包含”等内容。请参阅下面的示例,使用相同的标记,但使用属性选择器。

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