如何指定CSS类的顺序？

一尘不染

如何指定CSS类的顺序？

css

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

阅读 265

2020-05-16

共1个答案

一尘不染

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

.myClass1 {color:red;}

.myClass2 {color:green;}


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

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

2020-05-16