Question

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

Answer 1

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

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

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

div中的文本将显示为绿色而不是红色，因为myClass2在CSS定义中比我的class1更低。如果我要在class属性中交换类名的顺序，那么什么都不会改变。

Answer 2

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

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

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

Answer 3

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

var dialogResult = MessageBox.Show("Message", "System message",
                                   MessageBoxButtons.YesNoCancel, MessageBoxIcon.Question);
if (dialogResult  == DialogResult.Yes || dialogResult == DialogResult.Cancel)
{
    return;
}

// logic for No here
// as this means No was pressed

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

如何指定CSS类的顺序？

3 个答案: