CSSセレクタの詳細度とは
ある要素へのCSSの指定が競合した場合、どのセレクタが優先されるかということ。
CSSセレクタの優先順位 (強さ順)
- HTMLのstyle属性
- id
- class、擬似クラス、属性
- 要素型、擬似要素
⚠️ 同じ優先順位の場合は後に書いたCSSが優先される。
例
<body><divclass="red"><h1>あああ</h1></div></body>
.red{color:red;}div{color:black;}
![スクリーンショット 2019-11-12 17.38.46.png]()
classの方が要素型よりも強いので文字がredになる。