More than 3 years have passed since last update.

200513学習記録：CSSの優先順位

Last updated at 2020-05-15Posted at 2020-05-13

TechAcadmy lesson3 9.CSS

CSSの優先順位で覚えておくこと2つ
①下に書かれたものが優先
②詳細なセレクタが優先

①下に書かれたものが優先
→これは「green」が表示される。

p {
    color: red;
}
p {
    color: green;
}

②詳細なセレクタが優先
→これは「red」が表示される（もちろんclass指定されているpタグのところで）。

p.important {
    color: red;
}
p {
    color: green;
}

もうちょっと詳しく言うと
（CSS３スタンダード・デザインガイド参照）

セレクタごとに↓のa～dの値を算出し、aから順に比較して値が大きい場合は優先順位が高くなる仕組みになっている。

a インラインスタイルシートに記述
b IDの数
c クラス／疑似クラスの数
d 要素名／疑似要素の数

# sand{
 background-color:yellow;
 }

div h1{
 background-color:red;
 }

h1{
  background-color:pink;
 }

↓値を計算すると

# sand　→　bが１
div h1 →　dが２
h1 →　dが１

なので優先準備が最も高いのが#sand