0

li タグ内にリンクを含むネストされたリストがあります。ネスト レベル x では、リンクの外観を変更したいと考えています。サンプルコード:

CSS:

.blue a { color: blue; }
.red a { color: red; }

HTML:

    <ul>
    <li class="blue"><a href="#">blue-1</a></li>
    <li class="red"><a href="#">red-1</a></li>
    <li class="blue"><a href="#">blue-2</a>
        <ul>
            <li>
                <a href="#">blue-3</a>
                <ul>
                    <li class="red">
                        <a href="#">red-2</a>
                        <ul>
                            <li><a href="#">red-3</a></li>
                            <li><a href="#">red-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">blue-4</a></li>
                </ul>
            </li>
            <li class=""><a href="#">blue-5</a></li>
        </ul>
    </li>
    <li class="red"><a href="#">red-5</a>
        <ul>
            <li><a href="#">red-6</a></li>
            <li><a href="#">red-7</a></li>
        </ul>
    </li>
</ul>

このように、期待どおりに動作しています。テキストが red-* のリンクは赤で表示されます。しかし、CSS クラスの順序を変更すると、機能しなくなります。

.red a { color: red; }
.blue a { color: blue; }

なぜこの動作ですか？それは同じであるべきではありませんか？赤と青よりも多くの色を使用する必要があるため、CSS で正しい順序を指定することは不可能です。

4

2 に答える 2

4

Css セレクターの優先順位は、その具体性に応じて設定されます。

  • すべてのタグが1ポイントとしてカウントされます
  • 各クラス10点_
  • イベントIDを100ポイントとして

取得した両方のセレクターの優先順位は同じであるため、コードでさらに設定された方が前のセレクターをオーバーライドします。

于 2012-07-06T08:48:12.057 に答える
2

この理由は、cssで、という名前のクラスの子、孫などの要素であるすべての タグに通知しているためです。そして、名前が付けられたクラスの子、孫などの要素であるすべてのタグを赤にする必要があると言っているとき、それは上書きされています。ablueared

したがって、これを行う代わりに（すべてのリンクタグに影響します）

.blue a { color: blue; }
.red a { color: red; }

これを行うことができます（リンクタグの場合、最初の子にのみ影響します）：

.red > a,
.red > ul > li > a{ color: red; }
.blue > a,
.blue > ul > li > a { color: blue; }

その2行目は、クラス名を持つすべての要素を検索しますred。次に、すべての直接の子ul要素を検索します。そして、それらの一致する要素の下で、直接の子li要素を持つすべての直接の子要素を見つけaます。これらに合わせて、最終的にスタイルを追加します。

JSFiddle： http:
//jsfiddle.net/Y9jFr/

于 2012-07-06T08:43:25.397 に答える