2 つ以上の CSS ルールを同じテキストに適用すると、ルールが競合し、予期しない結果が生じる可能性があります。ブラウザは CSS ルールを次のように適用します。
2 つのルールが同じテキストに適用される場合、特定のプロパティが競合しない限り、ブラウザには両方のルールのすべてのプロパティが表示されます。たとえば、あるルールではテキストの色を青に指定し、別のルールではテキストの色を赤に指定する場合があります。
同じテキストに適用される 2 つのルールのプロパティが競合する場合、ブラウザには最も内側のルール (テキスト自体に最も近いルール) のプロパティが表示されます。したがって、外部スタイル シートとインライン スタイルの両方がテキスト要素に影響を与える場合は、インライン スタイルが適用されます。
直接競合がある場合、カスタム CSS ルール (クラス属性を使用して適用されるルール) のプロパティは、HTML タグ スタイルのプロパティをオーバーライドします。
次の例では、h1 に定義されたスタイルは、h1 のすべての段落のフォント、サイズ、色を指定しますが、その段落に適用されるカスタム CSS ルール .Blue は、h1 スタイルの色の設定をオーバーライドします。別のカスタム CSS ルール .Red は、.Blue スタイル内にあるため、.Blue をオーバーライドします。
<h1><span class="Blue">この段落は、.Blue カスタム スタイルと h1 によって制御されます。
HTML タグのスタイル。<span class="Red">ただし、この文は .Red スタイルによって制御されます。</span>
ここで、.Blue スタイルに戻ります。</span></h1>