スタイルの優先順位
同一のセレクタに異なる指定が設定された場合、適用される優先順位が定められています。
指定する場所
外部CSS、内部CSS、HTML内の順に優先されます。
HTML
<body>
<p>
今年は第二回の<strong>ワールド・ベースボール・クラシック(WBC)</strong>
が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は<em>優勝</em>でしたので今回もいい結果を出して欲しいものです。
</p>
</body>
外部CSS
strong {
color: #ff0000;
}
内部CSS
strong {
color: #00ff00;
}
結果
今年は第二回のワールド・ベースボール・クラシック(WBC) が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は優勝でしたので今回もいい結果を出して欲しいものです。
指定する順番
後から指定したCSSが優先されます。
HTML
<body> <p> 今年は第二回の<strong>ワールド・ベースボール・クラシック(WBC)</strong> が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は<em>優勝</em>でしたので今回もいい結果を出して欲しいものです。 </p> </body>
CSS
strong {
color: #ff0000;
}
strong {
color: #00ff00;
}
結果
今年は第二回のワールド・ベースボール・クラシック(WBC) が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は優勝でしたので今回もいい結果を出して欲しいものです。
!important
HTML
<body> <p> 今年は第二回の<strong>ワールド・ベースボール・クラシック(WBC)</strong> が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は<em>優勝</em>でしたので今回もいい結果を出して欲しいものです。 </p> </body>
CSS
strong {
color: #f00 !important;
}
strong {
color: #0f0;
}
結果
セレクタの詳細度
HTML
<body> <p id="sample"> 今年は第二回の<strong>ワールド・ベースボール・クラシック(WBC)</strong> が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は<em>優勝</em>でしたので今回もいい結果を出して欲しいものです。 </p> </body>
CSS
#sample {
color: #0000ff;
background-color: #fffacd;
}
p#sample {
color: #006400;
}
p {
color: #ff0000;
font-style: italic;
結果
今年は第二回のワールド・ベースボール・クラシック(WBC) が開催されます。監督選考の件で日本でもごたごたとしていましたが第一回 は優勝でしたので今回もいい結果を出して欲しいものです。