スタイルシートの優先順位
CSSではカスケーディングによって、複数の
外部スタイルシートや要素などでスタイルを設定することができる。しかし、同じ要素に対して異なるスタイルが設定されている場合は、ユーザエージェントによって優先順位が計算される。
（１）作者によるスタイルシートの優先
作者によるスタイルシートは、ユーザによるスタイル設定およびWebブラウザの標準スタイルより優先される。
（２）読み込み順による優先順位
あとから読み込まれたスタイルが優先される。
<head>
<link href="default.css" rel="stylesheet" type="text/css"> ←①
<style type="text/css"> ←②
p { color : red }
</style>
<link href="mono.css" rel="stylesheet" type="text/css"> ←③
・
・
・
<body>
・
・
・
<p style="color : blue"> ←④
この場合、優先順位は、④③②①の順になる。たとえば、上記の例で全てのスタイル設定箇所においてp要素の文字色が設定されている場合、最終的に優先されるのは、style属性に設定されている「青色」になる。
（３）最重要指定
CSS2では、!importantを設定することで、優先順位を変更し、他のスタイルよりあとに出現した場合であっても、最も優先することができる。
●!importantの設定例
p { color : red !important }
（４）詳細度によって優先順位を計算
セレクタにはさまざまな種類があるが、指定先が一意であるid属性の数が多いものが最も優先される。続いて、セレクタに含まれるclass属性や
擬似クラスの数が多いもの、要素の数が多いものが優先されるようになっている。
たとえば、次の例の場合、p#exceptionが最も優先され、文字色に「赤」が設定される。
●同じ要素に対するセレクタ
p { color : blue }
p.memo { color : green }
p#exception { color : red }
●HTMLの例
<p id="exception" class="memo">
※実際には、セレクタに含まれるid属性の数*100、擬似クラスまたは属性の数*10、というように数値によって優先順位を計算するための細かい規定がある。
最終更新：2007年05月23日 15:47
