CSS の優先順位: インライン スタイルがオーバーライドされる理由

CSS では、スタイルはルールの優先順位に基づいて要素に適用されます。複数のルールが同じ要素をターゲットにしている場合、最も優先順位の高いルールが有効になります。

この例では、rightcolumn を持つテーブル内の td 要素に padding-left: 10px を設定するインライン スタイルがあります。 ID。ただし、参照されたスタイルシートのスタイルは、.rightColumn クラス内のすべての要素のマージンとパディングを 0 に設定します。問題は、参照されているスタイルシートのスタイルの優先順位が高く、インライン スタイルがオーバーライドされることです。

詳細度の計算

CSS の優先順位は、次の詳細度によって決まります。ルール。特異性は次の基準に基づいて計算されます。

1. インライン スタイル宣言は特異性に 1 ポイント寄与します (a = 1)。
2. セレクター内の各 ID は 10 ポイント寄与します (b = n) ).
3. セレクター内の各クラスまたは疑似クラスは 1 ポイントを提供します (c = n)。
4. セレクター内の各要素または疑似要素は 1 ポイントを提供します (d = n)。

たとえば、セレクター .rightColumn * を持つルールの特異性は 0010 (a = 0、b = 0、c = 1、d = 0) ですが、セレクター td を持つルールは特異性は 0001 (a = 0、b = 0、c = 0、d = 1) です。 0010 は 0001 より大きいため、参照されたスタイルシートのルールが優先されます。

問題の解決

この問題を解決してインライン スタイルを適用するには、次の手順を実行します。 2 つのオプション:

1. ! important を使用: インライン スタイルに ! important を追加して、その重要性を強制的に高めることができます。ただし、このアプローチは維持が難しい場合があるため、可能であれば避けてください。
2. ルールの詳細性を高める: インライン スタイルにさらに具体的なセレクターを追加して、その具体性を高めることができます。たとえば、テーブルのセルにクラス名を追加し、.rightColumn .myUnpaddedTable のようなセレクターを使用してスタイルを設定できます。このように、インライン スタイルの詳細度は 0011 になり、参照されたスタイルシートのルールの詳細度 (0010) よりも高くなります。