BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSSクラスの並び順を指定するには？

2022-08-03 17:47:15

質問

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を使用しています。

どのように解決するのですか？

属性が上書きされる順番は、クラスが定義された順番ではなく、クラスが定義された順番で class 属性で定義された順序ではなく、CSS のどこに表示されるかによって決まります。 

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

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

のテキストは div が表示されます。 green と表示され red というのは .myClass2 はCSSの定義では .myClass1 . のクラス名の順番を入れ替えたとします。 class 属性のクラス名の順番を入れ替えても、何も変わりません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します