CSSクラスの順序を指定する方法は？

113

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>

私が期待するのは、の3番目の例でclass="basic extra"は青色の境界線があるはずです。これは、追加で指定された境界線が基本の境界線を上書きするためです。

私はubuntu 9.04でFF 3を使用しています

html css

— ティム・ビューテ
ソース

246

属性が上書きされる順序は、クラスがclass属性で定義されている順序ではなく、CSSに表示される場所によって決まります。

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

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

スニペットを展開

テキストがdiv表示されますgreen、そしてませんred。.myClass2CSSの定義では、よりも下にあるからです.myClass1。class属性のクラス名の順序を入れ替えても、何も変わりません。

— ゾイドバーグ
ソース

14

彼らがなぜこのように実装するのか理解できません。おかしなことに、CSSで実行できる他のほとんどのことに対する私の意見でもあります。

— byxor 2018

@ルールがカスケードしているためです。上から下、左から右にフォームを適用します。私には理にかなっている

— O-9

27

属性内のクラスの順序は関係ありません。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"/>

スニペットを展開

— TravisV
ソース