CSSの優先度設定

Web ページ制作では、スタイルを制御するために CSS を使用する必要があることがよくあります。 CSS ではスタイルを定義する方法が多数あり、同じ要素に対して異なる方法で同時にスタイルを定義する場合があり、この場合、CSS の優先順位の問題が関係します。要素には複数の CSS スタイル定義がある場合があり、最終的にどのスタイルが有効になるかを決定する方法には、CSS の優先順位の設定を理解する必要があります。

CSS セレクターの優先順位

CSS セレクターは、どの要素にどのスタイルを適用するかを決定するために使用されるルールです。 CSS では、セレクターの優先度は重みによって決定されます。各セレクターには重み付け値があり、重み付け値が大きいほど優先度が高くなります。

CSS セレクターの重み値の計算方法は次のとおりです。

• 各セレクターには、セレクターのタイプと、次のような対応する適格条件に従って、基本値が割り当てられます。要素の選択 セレクターは 1、クラス セレクターは 10、ID セレクターは 100、インライン スタイルは 1000;
• セレクター シーケンス (カンマで区切られた複数のセレクター) の場合、各セレクターの基本値値は合計を取得するために追加されます;
• 各要素について、一致したセレクター シーケンス内で最大の重み値を持つセレクターの基本値が優先値として使用されます;

例:

<style>
    #idSelector {
        color: blue;
    }
    .classSelector {
        color: green;
    }
    div {
        color: red;
    }
</style>
<div id="idSelector" class="classSelector">Hello World!</div>

この例では、要素 Hello World! は ID セレクター #idSelector とクラス セレクター .classSelector# を満たします。 ## と要素セレクター div を使用すると、CSS は次のルールに従って使用される最終スタイルを決定します。

ID セレクターの重み値は 100、次に、 #idSelector 基本値は 100、
クラス セレクターの重み値は 10、その後 .classSelector の基本値は 10、
要素セレクターの重み値は 1、 div の基本値は 1;
次に、重み値を追加するルールに従って、#idSelector の合計重み値は 100、.classSelector の合計重み値は 10、そして合計重み値div の値は 1;
最後に、最大の優先順位値を持つセレクター ルールに従って、要素
• のスタイルは ID セレクター #idSelector のスタイルを適用します。 、つまり、フォントの色は青になります。

<style>
    p {
        color: blue !important;
    }
    .classSelector {
        color: green;
    }
</style>
<div class="classSelector">
    <p>Hello World!</p>
</div>

.classSelector の color 属性を適用します (デフォルトは緑) が、! important の追加により、P 要素の色が強制的に適用されます。青くなること。 #! important タグは全能ではなく、インライン スタイルをオーバーライドすることもできません。インライン スタイルが存在する場合、セレクターに ! important が設定されていても、インライン スタイルによってオーバーライドされます。

CSS インライン スタイルの優先順位

HTML では、インライン スタイルは HTML タグ要素で直接定義されるスタイルです。インライン スタイルは単一の要素に作用するため、インライン スタイルは常に最高の優先順位を持ちます。

例:

<div style="color: red">Hello world!</div>

この例では、div 要素はインライン スタイルを使用し、色は赤です。他の CSS スタイル ルールを追加した場合でも、インライン スタイルは影響を受けません。この例では、div 要素の色は赤である必要があります。

CSS 継承ルール

font-family

font-size の値は、親要素から継承できます。 例:

<style>
    div {
        color: red;
    }
    .classSelector {
        font-size: 18px;
        font-family: Arial;
    }
</style>
<div class="classSelector">Hello world!</div>

.classSelector

.classSelector から継承されます。つまり、フォント サイズは 18 ピクセル、フォントは Arial です。色は親要素 div から継承され、赤になります。 要約:

以上がCSSの優先度設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。