CSSで優先度を設定する方法（ウェイトルール）

1. CSS 設定の優先順位とは何ですか?

CSS (Cascading Style Sheets)、カスケード スタイル シートは、Web ページにスタイルを追加するために使用されます。ただし、複数の CSS ルールが同じ要素をスタイル設定する場合、スタイルの優先順位の問題が発生します。 CSS の優先度設定はこの問題を解決します。

CSS では、各ルールには特定の重みがあります。スタイルの優先順位を達成するために、より高い重みを持つルールは、より低い重みを持つルールをオーバーライドします。 CSS 設定の優先順位には、セレクター、クラス、ID、スタイルの順序という 4 つの要素が関係します。

2. CSS の優先順位の重みルール

1. セレクターの重み

CSS では、セレクターは要素セレクター、クラス セレクター、ID セレクターに分類されます。スタイルの競合が発生した場合、セレクターの重みは次の順序で増加します。

要素セレクター (1)
クラス セレクター (10)
ID セレクター (100)

2. クラスと属性の重み

クラスと属性の重みはセレクターの重みと同じであり、スタイルが競合する場合も、上記の増加ルールに従って優先度が決定されます。

3. スタイルの順序

スタイルが競合する場合、後で定義されたスタイルが以前に定義されたスタイルを置き換えます。したがって、同じウェイトで定義されたスタイルが存在する場合、最後に定義されたスタイルが以前のスタイルをオーバーライドします。

4.!重要なキーワード

CSS では、!重要なキーワードを使用すると、スタイル定義に最も高い重みを持たせることができ、セレクター、クラス、ID、または順序に関係なく、他の定義をオーバーライドできます。ただし、この方法はスタイルの継承と可読性を損なうため、できるだけ避けてください。

3. CSS 設定の優先順位の例

CSS 設定の優先順位をよりよく理解するために、以下にいくつかの例を示します:

1. セレクターの優先順位

次のスタイル ルールが最初に div 要素に適用されます:

div{

font-size: 22px;
color: red;

}
/Element selector/
p{

font-size: 18px;
color: blue;

}
/要素セレクター/
.container div{

font-size: 14px;
color: green;

}
/クラス セレクター /
。 class1{

font-size: 24px;
color: yellow;

}
/ID Selector/

id1{

font-size: 28px;
color: purple;

}

2. 定義されたスタイル後の方が優先度が高い

次のスタイル ルールでは、後で定義された色の方が優先度が高くなります:

p{

color: red;

}
p {

color: blue;

}

3.! important が最も優先度が高くなります

次のスタイル ルールのうち、color: yellow; が最も優先度が高く、最初に p 要素に適用されます。

p{

color: red!important;
font-size: 18px;
color: blue;

}
p{

color: yellow;

}

4. まとめ

CSS の優先順位設定について紹介します。スタイルの競合の問題を解決します。スタイルの競合が発生した場合、セレクター、クラス、ID、スタイルの順序はすべて優先順位に影響します。 CSS で優先順位を設定するためのルールを理解すると、スタイルの問題をより適切に解決し、開発効率を向上させることができます。

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