CSS セレクターの重みと優先順位のルール

CSS では、定義されたスタイル ルールの順序は、より具体的なセレクターを含むルールが一般的なセレクターを含むルールよりも優先されます。2 つのルールの具体性が同じ場合、最後に定義されたルールが優先されます。優先する CSS を使用して Web ページ要素のスタイルを定義するときに、このような状況がよく発生します。一般的なスタイルを一般的な要素に適用してから、より具体的な要素でオーバーライドする必要があります。では、新しく定義した要素スタイルがターゲット要素の元のスタイルを確実にカバーできるようにするにはどうすればよいでしょうか?

CSS では、定義されたスタイル ルールの順序は、セレクターの詳細度に基づいて決定されます。2 つのルールの詳細度が同じ場合、より具体的なセレクターを含むルールが優先されます。優先します。

それでは、セレクターの特異性をどのように計算するのでしょうか?下の図は、特異度の計算方法を示しています。



特異度を 4 つのレベルに分け、各レベルの値にセレクターの個性を掛け合わせます。このレベルの重み、そして最後にすべてのレベルの値を加算してセレクターの特別な値を取得します。

4 つのレベルは次のように定義されます:

第 1 レベル: などの、重み 1000 のインライン スタイルを表します。
第 2 レベル: 重み 100 の #content などの ID セレクターを表します。
第 3 レベル: 重み 10 の代表クラス、疑似クラス、属性セレクター (.content など)。
第 4 レベル: 重み 1 の型セレクターと pp などの疑似要素セレクターを表します。

たとえば、上の図では、#NAV が第 2 クラスのセレクター、.ACTIVE が第 3 クラスのセレクター、UL、LI、A が第 4 クラスのセレクターです。この場合、セレクター式全体の特異性の値は 1*100+1*10+3*1=113 になります。

いくつかの計算例を示します:



注: ユニバーサル セレクター (*)、サブセレクター ( >) と隣接する兄弟セレクター (+) はこれら 4 つのレベルにないため、それらの重みはすべて 0 になります。
具体的な例を見てみましょう: 次のスタイル ルールのセットがある場合、HTML コード内の 2 つのタイトルが何色であるかわかりますか?

#content p#main-content h2{   
    color:red;   
}   

#content #main-content>h2{   
    color:blue
}   
body #content p[id="main-content"] h2{   
    color:green;   
}   

#main-content p.paragraph h2{   
    color:orange;   
}   
#main-content [class="paragraph"] h2{   
    color:yellow;   
}   
p#main-content p.paragraph h2.first{   
    color:pink;   
}

以下は HTML コードです:

<p id="content">
    <p id="main-content">
        <h2>CSS简介</h2>
        <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
        <p class="paragraph">
            <h2 class="first">使用CSS布局的优点</h2>
            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
        </p>
    </p>
</p>

理解できましたか?答えは、どちらのタイトルも赤です。
6 つのスタイル ルールそれぞれの特異性の値を計算してみましょう:
最初の特異性の値=2*100+2*1=202
2 番目の特異性の値=2*100+1 =201
3番目の特殊性の値=1*100+1*10+3*1=113
4番目の特殊性の値=1*100+1*10+2*1=112
5番目の特殊性の値=1 *100+1*10+1*1=111
6番目の特性の値=1*100+2*10+3*1=123
明らか、第一スタイルルール 202の高得点で勝利このスタイル セレクターの特異性コンテストのチャンピオンシップは、以下のルールの一部がより複雑に見えますが、特異性は、誰のセレクター式が長く記述されるかということではありません。これが王道です。
セレクターの特性を理解することは、特にバグを修正する場合に重要です。なぜなら、どのルールが優先されるのか、またその理由を理解する必要があるからです。
機能していないと思われる CSS ルールが見つかった場合は、特異性の競合が発生している可能性があります。より具体的にするには、親要素のいずれかの ID をセレクターに追加してください。これで問題が解決した場合は、スタイルシートの別の場所に、あなたのルールをオーバーライドするより具体的なルールがある可能性があります。この場合、コードを見直して特異性の競合を解決し、コードをできるだけ簡潔にすることができます。

CSS セレクターの重みと優先順位のルールに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。