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