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 のスタイルを適用します。 、つまり、フォントの色は青になります。

CSS プロパティの重要性

場合によっては、一部のスタイル ルールが他のスタイル ルールを無条件にオーバーライドしたい場合があります。このとき、CSSの! important属性を使用する必要があります。 CSS では、! important を使用すると、特定のスタイル ルールを強制的に最初に有効にすることができます。

例:

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

この例では、P 要素に color 属性が適用され、強制的に ! important に設定されます。 ! important タグがない場合、P 要素は実際には

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

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

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

例:

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

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

CSS 継承ルール

#CSS 継承ルールでは、特定のスタイル属性を親要素から継承できることが規定されています。要素で特定の CSS プロパティ値が指定されていない場合、それらは親要素から継承されます。たとえば、頻繁に使用される可能性のある 2 つの CSS プロパティ

font-family

と

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

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

この例では、div 要素は色を赤に設定し、フォント属性を設定しません。子要素は

.classSelector

の font 属性を使用するため、フォントは

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

CSS の優先順位ルールは少し面倒ですが、それをマスターすれば、スタイルをより適切に制御できるようになります。優先順位を設定するとき、セレクターの重みとスタイルの ! important 属性を変更することで、特定のスタイル属性の優先順位のニーズを満たすことができます。同時に、インライン スタイルが最も優先され、他のすべてのスタイル ルールがオーバーライドされることにも注意してください。 CSS 継承ルールを使用すると、スタイル ルールの一貫性を確保しながら、コードの量を削減し、Web ページのコードをより適切に維持できるようになります。

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