CSSのカスケード規則と詳細度
CSS 言語には、競合が発生した場合にどちらのセレクターが強いかを制御するための規則があります。これらの規則はカスケードcascadeと詳細度specificityと呼ばれています。以下のコードブロックでは、 p セレクターに対して2つの規則が定義されていますが、段落テキストは青くなります。これは、段落テキストを青に設定する宣言がスタイルシートの後に現れているからです。後のスタイルは、それより前のスタイルシートに現れた競合するスタイルを置き換えます。これがカスケード規則です。 以下のCSSが定義されていた場合、後で定義された p が適用されて 青文字になる。これがカスケード規則
code:css
p {
color: red;
}
p {
color: blue;
}
しかし、以下のCSSが定義されており、<p class="special">What color am I?</p> のHTMLは 青文字にならない。
code:css
.special {
color: red;
}
p {
color: blue;
}
.special のクラスセレクターの方が p要素セレクターよりも詳細度が高いため、優先される。