1

私はブラウザが次の例 (Opera 9.5 と Firefox 3.0 に基づく結果) をレンダリングする傾向があることを実際に知っていますが、それらの背後にある理由を理解していません。

この例を見て、

<style type="text/css">
#outer{color:red;}
.inner{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

結果は青いテキストです。

ただし、この例を見てください。

<style type="text/css">
#outer span{color:red;}
.inner span{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

テキストが赤くなりました。

最後に、これを試してください、

<style type="text/css">
#outer span{color:red;}
#inner span{color:blue;}
</style>

<div id="outer" class="outer">
    <div id="inner" class="inner">
        <span>testing</span>
    </div> 
</div>

もう一度、青色のテキストを表示します。

この方法論には特定の理由がありますか?

(わかりにくいタイトルで申し訳ありません。私が管理できる最善のものです。)

4

5 に答える 5

2

例1では、span要素が直接ターゲットにされていないため、CSS継承がどのように処理されるかを調べる必要があります。色は継承されたプロパティであるため、色を決定するためにスパンの最も近い親要素を調べる必要があります。例1のケースでは、クラス（.inner）に青色が定義されており、その継承がスパンに渡されます。

例2では、​​span要素が両方のルールによって直接ターゲットにされているため、CSSカスケードを調べて、要素をターゲットとするルールのどちらが最も具体的であるかを判断する必要があります。IDセレクターを使用したルールが優先されます。

例3では、CSSカスケードルールをもう一度呼び出します。両方の特異性が等しいため、最後のルールが優先されます。

この状況では、次のことに注意してください。

 #outer {color: red; }
 span {color: blue; }

テキストは青色になります。これは、2番目のルールが要素を直接対象としているため、CSSカスケードを呼び出さないためです。

もっと読む：

注と開示：私は3番目のブログ投稿を作成しました。

于 2009-03-23T01:42:31.533 に答える
2

W3C には、CSS がどのようにカスケードされ、優先されるかについての詳細な説明があります。あなたの正確な状況では、これが起こっていることです：

  1. 「色」は継承されたプロパティですが、内側のセレクターはスパン自体を対象としているため、優先されます。

  2. どちらもスパンをターゲットにするようになったため、より具体的なもの (id セレクター) が優先されます。

  3. 現在、それらは両方とも同様に具体的であるため、後に表示される宣言が優先されます。

于 2009-03-23T00:24:48.350 に答える
1

この説明が役立つことを願っています:

例 1) 一般的なルールなので、直接の親 .inner の色を適用します。

例 2) ID はクラスよりも具体的です (特定の ID を持つ要素は 1 つしかないため)。したがって、ID セレクターはより具体的で重要であると見なされます。

例 3) 2 つのルールは同じように具体的であるため、最後のルールが選択されます。

ダルコ

于 2009-03-23T00:09:57.433 に答える
0

カスケード (CSS の「C」) は、どのルールが優先されるかを明確に定義できるように明確に定義されています (重要なユーザーとエージェントのルールを許可することを含む)。

しかし、ルールも単純ではありません (大規模な階層が指定された複雑な一致のこと)。

カスケードの最後のステップは宣言の文書順で、最後に勝利します。

于 2009-03-23T00:15:19.247 に答える
0

In the first example the first style applies to the outer div. The inner div then inherits this style, but the second style applies to the inner div so it overrides the inherited style.

In the second example both styles apply to the span. The first style takes precedence because an id is more specific than a class.

In the third example both styles also apply to the span. As they have the same specificity, the last style takes precedence just because it's last.

You can read more about how precedence is determined here.

于 2009-03-23T00:22:52.410 に答える