CSS ウェイトの割り当て方法_html/css_WEB-ITnose

CSS の重みは 4 つの値で決まります。 図を見ながら説明するとわかりやすいです。

画像は英語なので翻訳して説明します。 4 レベルの定義は次のとおりです。

最初のレベル: などのインライン スタイルを表し、重みは 1000 です。

第 2 レベル: 重み 100 の #content などの ID セレクターを表します。

第 3 レベル: 重み 10 の代表クラス、疑似クラス、属性セレクター (.content など)。

第 4 レベル: 重み 1 の div p などの型セレクターと疑似要素セレクターを表します。

最後に、これらの値を加算して、現在の要素の重みを取得します。

重みは計算されましたが、特定の要素にどのスタイルを使用するかについては、まだ 3 つのルールがあります:

1 (スタイルが追加される場合) ! 重要なタグ、例:

p{ color: gray !important}

このタグのスタイルを常に使用します。

2. 一致するコンテンツは CSS の重みに従って並べ替えられ、より大きな重みが優先されます。どのスタイルを適用するかを決定する要素ですが、前述したように、このステップが最も複雑です。

3、重みが同じ場合、CSS スタイル シートで宣言された順序に従って、後で宣言されたものが優先されます。次に例を示します。 🎜>

最後に、勝者は色: 赤です。

h1 {color: blue}h1 {color: red}