スタイルシートの優先順位

次のページでは、「Sample」という文字に対して５つのスタイルシートが別々の色を指定しています。このようにスタイルシート間で競合が起きたときの混乱を避けるため、優先順位が決められていて、そのページで最も優先度の高いスタイルが適用されます。一口で言うと「"現場に近い"スタイルシートの方が優先度が高い」と言えます。

このページでは１の優先度が最も高く、上の「Sample」は緑、下の「Sample」は赤で表示されます。

↑ ５つのスタイルが競合

↑ 最優先の１が表示される

次のページでは２の優先度が最も高く、上の「Sample」は赤、下の「Sample」は緑で表示されます。

↑ ４つのスタイルが競合

↑ 最優先の２が表示される

次のページでは３の優先度が最も高く、「Sample」は青で表示されます。

↑ ３つのスタイルが競合

↑ 最優先の３が表示される

次のページでは４の優先度が最も高く、「Sample」はシアンで表示されます。

↑ ２つのスタイルが競合

↑ 最優先の４が表示される

次のページでは５の優先度が最も高く、「Sample」はマゼンタで表示されます。

↑ test.css (外部スタイルシート)

↑ スタイルシートは１つ

↑ 最優先の５が表示される

次のページではブラウザのデフォールトスタイルシートにより、「Sample」は黒で表示されます。

↑ スタイルシート無し

↑ ブラウザのデフォールトスタイルシートで表示される