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

如何指定CSS类的顺序?

css html

133

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

我对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 回复 | 直到 8 年前

212

Sumit Bohemian 7 年前

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

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

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

文本在 div 将出现 green red .myClass2 在CSS定义中比 .myClass1 属性,什么都不会改变。

VoteyDisciple 16 年前

无关紧要。所有班级 class 属性同样应用于元素。

问题是:以什么顺序出现在您的.css文件中。在您的示例中, .basic .extra 所以

如果你想提供第三种可能性(例如 基本 但是 .额外 .basic-extra 也许,这明确规定了这一点。

TravisV 7 年前

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