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