この記事はコーディングしていたらよく遭遇する「CSS上書きできない問題」についての記事です。
あれ？全然CSSが効かないなぁ
とりあえず全部に!important付けとけばええやろ。
、、、上書きできない。複雑すぎてよく分からん。詰んだ。
なんてことがあったので、一度CSSの優先順位を確認して備忘録として共有します。
目次
【大原則】うしろが優先！
CSSはうしろで指定されたものが優先されるという原則があります。
p {
background: blue; //適用されない
}
p {
background: red; //適用される
}ここで僕が一度ハマった落とし穴が、「スタイルシートの読み込み順番」です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./css/style.css"> //style.cssで指定しても
<link rel="stylesheet" href="./css/reset.css"> //上書きされてしまう
</head>
・
・
・index.htmlのheadでスタイルシートの読み込み順を逆にしてしまうとせっかく指定したCSSが上書きされてしまいます。
点数の仕組み
大原則を踏まえて、ここのスタイルは優先させたい、けどもう一回うしろに同じCSSを書くのもコードが見づらくなって嫌だ
ってこともあるので、点数表を参考にすれば思い通りのスタイルを適用させることができます。
| セレクタ | HTML | 点数 | 合計 |
|---|---|---|---|
| 全称 | * | 0 | 0 |
| タイプ | p | 1 | 1 |
| 疑似要素 | :first-child | 1 | 1 |
| 擬似クラス | [type=”text”] | 10 | 10 |
| class | .inner | 10 | 10 |
| id | #about | 100 | 100 |
| 要素に直接 | style=”” | 1000 | 1000 |
| タイプ＋疑似要素 | p:first-child | 1 + 1 | 2 |
| タイプ＋クラス | p .inner | 1 + 10 | 11 |
点数は足し算されていき、セレクタが多く指定されているものが優先されるところがミソですね。
!importantは【苦渋の決断】
それでもだめだ。すべてをぶっ飛ばしたいってときには！importantを付けるしかないですね。
あとから別の人が修正したりする時の保守性を考えても最後の最後という感じがします。
p {
background: blue !important; //適用される
}
p {
background: red; //適用されない
}まとめ
これでCSSが適用されないなんてことは有り得ない！
sass使っててWatch sass押し忘れてコンパイルされてない。。。
なんてこともあるから凡ミス注意！
引用元
