CSSの優先順位
スタイルの優先順位
外部スタイルシート
<link rel="stylesheet" href="外部のスタイルシート.css" type="text/css" />
style要素
<style type="text/css"/> p {color: #ffffff;}</style>
style属性
<p style="color:#ff0000"/>文字など<p>
style属性が優先度が高く次にstyle要素、最後が外部スタイルシートになります。これらは混在して用いることができます。また複数回指定することも出来ます。
継承
CSSで設定されたプロパティの値は親要素から子要素に継承（受け継がれる）されるのが原則です。プロパティーによっては継承されないもの継承される値の計算が複雑なものもあります。
body { font-size: 10pt }
h1 { font-size: 130% }
<BODY>
<H1>A <EM>large</EM> heading</H1>
</BODY>
h1要素の文字の大きさはbodyにCSSで設定された文字の大きさ10ptの130%なので13ptとなります。em要素は文字の大きさの設定がありませんがh1要素の子要素になるので13ptを継承します。
詳細度による優先順位
id>class>要素の順で左から優先度が高くなります（10倍ずつ）。それぞれのセレクタの数を合算し適用される優先順位を決定します。全称セレクタ(汎用セレクタ)は計算の対象外です。この規則以外に属性値に対する指定はclassと同等だとかstyle属性はidセレクタより優先度が高い（10倍）などがあります。
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
- *は計算対象外
- liはタイプセレクタ1つなので計算値は1
- li:first-lineはタイプセレクタと疑似クラスで計算値は2
- ul liはタイプセレクタ2つで計算値は2
- ul ol+liはタイプセレクタ3つで計算値は3
- h1 + *[rel=up]はタイプセレクタ1つと属性セレクタで計算値は11
- ul ol li.redはタイプセレクタ3つとクラスセレクタ1つで計算値は13
- li.red.levelはタイプセレクタ1つとクラスセレクタ2つで計算値は21
- #x34y はidセレクタ１つで計算値は100
- style=""はstyle属性の計算値は1000
CSS優先順位のサンプル
<div id="container">
このHTMLに対して次ののCSSを設定した場合、p要素は親要素の値を継承するがより近いところで上書きされ、最終的にはp要素自体にスタイルが設定されているので『適用されるスタイルは』の文字色は緑になります。対象要素に直接するほうが優先順位は高い。
<div class="box1">
<p>適用されるスタイルは</p>
</div>
</div>
#container{ color: #ff0000;} /*赤*/
親子関係の近いところ（.box1のほうが#containerよりp要素に近い）に設定したCSSが優先され、その中で詳細度の高いものが優先される。
.box1{ color: #0000ff;} /*青*/
p{ color: #00ff00;} /*緑*/
