CSS スタイルの優先順位_html/css_WEB-ITnose

多くの場合、要素のスタイルは要素上で直接定義されるのではなく、その祖先要素上で定義され、スタイルは継承を通じて取得されます。たとえば、bodyで定義したテキストのcolor属性はp要素でも有効です。これがスタイルの継承です。

要素が複数の場所でスタイル属性を定義している場合、最終的にどれが有効になりますか?

例: フォント サイズは本文で定義され、テキストの色は要素 p の属性スタイルで定義され、要素 p のテキストも両方の内部スタイルで定義されます。スタイル シートと外部スタイル シートの色、および特定のテキストも属性 ID とクラス名を使用してテキストの色を定義します。これにより、複雑なスタイルのカスケード関係が生まれます。誰が役割を果たすことができるでしょうか?

要素が同じ属性名を持つ複数のスタイルで繰り返し使用される場合、つまりスタイルのカスケードが発生し、CSS はこれらのスタイルのセレクターの特殊性を通じてスタイルの 1 つを選択する必要があります。セレクターが特殊であればあるほど、セレクターの優先順位が最も高いスタイルが選択されます。最も優先度の高いスタイルが複数ある場合は、要素に最も近いスタイルが選択されます。

セレクターの特異性は、次のルールに従って決定できます。

(1) ID セレクターの場合、各特異性に対して 0100 を追加します。 🎜>
(2) クラス セレクター、属性セレクター、疑似クラス セレクターの場合は、各詳細に 0010 を追加します。

(3) ラベル セレクターおよび疑似要素セレクターの場合は、0001 を追加します。各詳細度;

(4) 各要素は 1 つのインライン スタイルのみを定義でき、インライン スタイルの詳細度は 1000 です。

(5) コンバイナーとユニバーサル選択の場合、セレクターは影響しません。

(6) 継承されたセレクターには特異性がなく、その特異性は 0000;

(7) ！重要なスタイルが最優先されます。

優先度の比較:

0020;

0020;

特異度の計算例