如何指定 CSS 类的顺序？答案

【问题标题】：How to specify the order of CSS classes?如何指定 CSS 类的顺序？
【发布时间】：2010-11-22 05:50:37
【问题描述】：

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

【解决方案1】：

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

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

&lt;div class="myClass2 myClass1"&gt;Text goes here&lt;/div&gt;

div 中的文字会出现green，而不是red；因为.myClass2 在 CSS 定义中比.myClass1 更靠后。如果我在 class 属性中交换类名的顺序，什么都不会改变。

【讨论】：

我不明白他们为什么要这样实现它。有趣的是，这也是我对 CSS 可以做的大多数其他事情的看法。
@ 因为规则是级联。他们从上到下，从左到右应用表格。对我有意义
我实际上在 Bootstrap 中注意到我的自定义“返回顶部”类在
标记中被忽略了。但是当我反转它们并将我的自定义类放在首位时，我的类和 Bootstrap 类的特性都被接受了：

。知道为什么吗？
取决于每个类中定义的属性。如果您的自定义类指定了 1px 纯黑色边框并且引导类没有为边框定义任何内容，则将使用您的边框属性。
@O-9 在现代世界中，CSS 规则的顺序非常随机。我的开发服务器和 webpack 构建给出了不同的结果。这只是糟糕的设计，简单明了。

【解决方案2】：

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

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

如果您想提供第三种可能性（例如，它是 .basic，但 .extra 规则仍应适用），您需要发明另一个类 .basic-extra，它明确规定了这一点.

【讨论】：

【解决方案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"/>

【讨论】：