私のインライン スタイルがスタイルシートによってオーバーライドされるのはなぜですか?

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

以上が私のインライン スタイルがスタイルシートによってオーバーライドされるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。