競合する CSS ルールについて

同じテキストに複数の CSS ルールを適用すると、ルールが競合して予想外の結果が生じることがあります。ブラウザは次のように CSS ルールを適用します。

• 同じテキストに 2 つのルールが適用されている場合、特定の属性が競合しない限り、ブラウザは両方のルールにあるすべての属性を表示します。たとえば、片方のルールでテキストカラーに青が指定され、他方ではテキストカラーに赤が指定されている場合は競合が生じます。
• 同じテキストに適用された 2 つの属性が競合する場合、ブラウザは、最も内側のルール (テキストに最も近いルール) の属性を表示します。つまり、テキストエレメントに外部スタイルシートとインラインスタイルが指定されている場合、インラインスタイルが適用されます。
• 直接の競合がある場合は、カスタムの CSS ルールの属性 (class 属性により適用されたルール) が、HTML タグスタイルの属性に優先されます。

以下の例では、h1 に対して定義されたスタイルが、すべての h1 段落のフォント、サイズ、カラーを決定します。h1 段落に適用されたカスタム CSS ルールである .Blue は、h1 スタイルのカラー設定より優先されます。さらに、2 番目のカスタム CSS ルールの .Red は .Blue スタイルの内側にあるので、これが .Blue に優先されます。

<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span>
Now we're back to the .Blue style.</span></h1>