57

私はよく CSS オーバーライド ルールに混乱します。一般的に、より具体的なスタイル シートはあまり具体的でないスタイル シートをオーバーライドし、その具体性は指定されたセレクターの数によって決まることを認識しています。また!important、同様に役割を果たすキーワードもあります。

簡単な例を次に示します。2 つのテーブル セルを含むテーブルがあります。テーブル自体には、テーブル内のすべてのセルに適用される CSS ルールがあります。ただし、2 番目のテーブル セルには、一般的なテーブル ルールをオーバーライドする独自のルールがあります。

<html>
<head>
<style type = "text/css">

table.rule1 tr td {
    background-color: #ff0000;
}

td.rule2 {
    background-color: #ffff00;
}

</style>

</head>
<body>
    <table class = "rule1">
        <tr>
            <td>abc</td>
        </tr>
        <tr>
            <td class = "rule2">abc</td>
        </tr>
    </table>
</body>
</html>

しかし...これをブラウザで開くと、rule2オーバーライドされていないことがわかりますrule1。わかりました-rule2より「具体的」にする必要があると思いますが、特定のテーブルセルに適用したいだけなので、これ以上セレクターを定義することはできません。ということで、キーワードを入れてみました! importantが、それもうまくいきません。

rule2次のように、テキスト ノードを でラップするとオーバーライドできます<div>。

        <td class = "rule2"><div>abc</div></td>

...次に、CSS ルールをより具体的にします。

td.rule2 div {
    background-color: #ffff00; !important
}

これは機能しますが、私が望むものではありません。1 つには、ルールをDIV ではなくtable cellに適用したいということです。rule1背景色がdiv の周囲の境界線として表示されるため、違いが生じます。

では、CSS に要素rule2をオーバーライドrule1するように指示するにはどうすればよいでしょうか?td

4

3 に答える 3

76

2 番目のルールにより高い特異性を与えるには、常に最初のルールの一部を使用できます。この場合table.rule1 tr、ルール 1 から追加し、それをルール 2 に追加します。

table.rule1 tr td {
    background-color: #ff0000;
}

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

しばらくすると、これは自然なことだと思いますが、同意しない人もいます。それらの人々のために、私はLESSまたはSASSを調べることをお勧めします。

于 2012-06-29T14:27:09.497 に答える
17

特異性は、ルール内の ID、クラス、およびタグ セレクターの量に基づいて計算されます。ID の特異性が最も高く、次にクラス、タグの順です。最初のルールは 2 番目のルールよりも具体的になりました。どちらにもクラス セレクターがありますが、最初のルールにも 2 つのタグ セレクターがあるためです。

2 番目のものを最初のものよりも優先させるには、その親の情報を追加して、より具体的にすることができます。

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

セレクターの優先順位の詳細については、こちらの記事を参照してください。

于 2012-06-29T14:24:12.310 に答える
6

重要なのは;の中にある必要があります。

td.rule2 div {     background-color: #ffff00 !important; }

実際、これはそれをオーバーライドする必要があると私は信じています

td.rule2 { background-color: #ffff00 !important; }
于 2012-06-29T14:21:55.660 に答える