このページの短縮URL(リンク用) §03-08…CSSの優先順序1 – オンライン無料パソコン講座 | PCセミナー

§03-08…CSSの優先順序1

(01) CSSの書式情報は、下にあるものが優先されます。

h2{
padding:1em;
}
h2{
padding:0.5em; ←優先
}

(02) また、HTMLファイルは複数のCSSを読み込むことができます。その場合は下にあるものが優先されます。

<link rel="stylesheet" type="text/css" href="str01.css" />
<link rel="stylesheet" type="text/css" href="str02.css" /> ←優先

(03) 順序が逆転するケースも多々あります。class属性が指定されていると優先度が高くなります。

h2.topbar{
padding:1em; ←優先
}
h2{
padding:1.5em;
}

(04) 子孫セレクタを使い、特定度が高くなっていると優先度も高くなります。ただしclass属性がある方が優先です。

table td{
padding:1em; ←優先
}
td{
padding:1.5em;
}
table td{
padding:1em;
}
td.money{
padding:1.5em; ←優先(class属性の方が強い)
}

(05) 正確な優先度はポイントで計算されています。class名→10pt、要素名→1ptです。同ポイントならば下部に記述されている情報が優先されます。

td→1pt
table tr td→3pt(1+1+1)
td.money→11pt(1+10)
table tr td.money→13pt(1+1+1+10)