4 
<html><head><style type="text/css">
    #foo  { color: blue; }
    a.bar { color: red; }
    #foo .baz  { background-color: cyan; }
    a.bar > .baz { background-color: yellow; }
</style></head>
<body>
    <div id="foo">
        <a href="#" class="bar">
            <span class="baz">TEXT</span>
        </a>
    </div>
</body>
</html>

私は CSS 初心者ですが、私の直感では、これはを含むよりもa.bar具体的な一致であり、黄色の背景に赤で表示されるはずです。または、より具体的な場合は、シアンの背景に青で表示する必要があります。<span>TEXT#fooTEXT#fooTEXT

代わりにTEXT、シアンの背景の赤で表示されます (Chrome、IE8 でテスト済み)。より具体的であるが、a.barより具体的であるというのはどうしてですか？このテキストを赤と水色の黄色で表示し、既に指定したスタイルへの影響を最小限に (最小限の変更で) するにはどうすればよいでしょうか?#foo#foo .baza.bar > .baz

4

3 に答える 3

3

テキストの色で表示されるものは、適用されるセレクターとは関係ありません。両方のセレクターが適用されていますが、異なる要素に適用されています。CSS をインライン スタイルに変換すると、次のようになります。

<body>
    <div id="foo" style="color: blue;">
        <a href="#" class="bar" style="color: red;">
            <span class="baz" style="background-color: cyan;">TEXT</span>
        </a>
    </div>
</body>

background-color: yellow;より具体的なセレクターによってオーバーライドされましたが、他のセレクターは互いにオーバーライドしません。それらはさまざまな要素に適用されます。colorスパンは、指定された値を持つ最も近い祖先からを継承しますcolor。この場合、それは<a>.

最小限の変更で黄色の背景が必要な場合は、そのセレクターの前#fooに#foo a.bar > .baz. これはJSFiddle のデモです。

于 2012-06-11T23:45:55.243 に答える
1

これはすべて特異性にかかっています。これは良い（古い）リソースです（ダウンロードできるjpgをチェックしてください）

于 2012-06-11T23:43:47.337 に答える
1

かなり面倒です。直感的に理解できるはずですが、深く掘り下げると、期待どおりに動作しない可能性があります。ただし、Smashing Magazine は包括的なガイドをまとめています: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

于 2012-06-11T23:44:32.773 に答える