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

CSS の特異性: スタイル階層の支配

Web 開発の世界では、競合するスタイルを効果的に管理するために CSS の優先順位を理解することが重要です。次のシナリオを考えてみましょう。Web ページにはインライン スタイルと参照されたスタイルシートの両方が含まれていますが、スタイルシートがインライン スタイルをオーバーライドしているように見えます。

この優先順位の問題は、CSS の特異性の概念が原因で発生します。 CSS は、セレクターの長さと詳細性に基づいて、各スタイル宣言に数値を割り当てます。値が大きいほど、特異性が高くなり、他のスタイルをオーバーライドする可能性が高くなります。

指定された例では、提供される CSS は次のとおりです:

<style>
  td {
    padding-left:10px;
  } 
</style>

and

.rightColumn * {margin: 0; padding: 0;}

td のインライン スタイル宣言の特異性は 0001 (ID 属性ゼロ、クラスまたは属性セレクターゼロ、および要素名 1 つ) です。 .rightColumn * のスタイルシート宣言の特異性は 0010 (ID 属性がゼロ、クラス セレクターが 1 つ、属性または疑似クラス セレクターがゼロ、要素名がゼロ) です。

CSS の特異性ルールによると、後者の宣言は

この問題を解決するには、次の 2 つのオプションがあります。

1. 使用 !重要: td スタイル宣言に ! important を追加して、スタイルシート ルールよりも重要にします。ただし、競合するルールが多数ある場合、! important の使用は問題になる可能性があります。
2. インライン スタイルの詳細度を高める: td セレクターに ID またはクラスを追加して、td セレクターの詳細度を高めます。 。これにより、インライン スタイルにスタイルシート ルールよりも高い特異性が与えられ、それを上書きできるようになります。

例:

<style>
  .important-td {
    padding-left:10px;
  } 
</style>

または

<style>
  #specific-td {
    padding-left:10px;
  } 
</style>

CSS の特異性を理解することは、効果的な Web デザインと、要素に適用されるスタイルが意図したとおりであることを確認するために不可欠です。特異性の概念を活用することで、開発者はスタイルに優先順位を付け、Web ページに望ましい外観を作成できます。

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