css 優先順位 的な
今日悩んでたけど、 ぜんっぜん難しくない話
まずは、例を紹介。例ってほどのものでもないか。
<div class="a aa"></div>
これに、スタイルを当てたい場合、 優先順位を考えると
.a {
width:100px;
height: 50px;
background-color: pink ;
}
div .aa{ background-color: red; } →.aより優先度は高い
. a .aa{ background-color: red; } →これは間違い、結局.aと同じこと
. a.aa{ background-color: red; } →これも.aよりは優先度高い。この４つの中では一番優先度高い。
div .aa{ background-color: red; } →.aより優先度は高い
. a .aa{ background-color: red; } →これは間違い、結局.aと同じこと
. a.aa{ background-color: red; } →これも.aよりは優先度高い。この４つの中では一番優先度高い。
important!はつかわない！！
- id > class
- .header > header
最後に
| 指定方法 | 例 | 点数 |
|---|---|---|
| タグのstyle属性 | style="" | 1000点 |
| ID | #hoge | 100点 |
| クラス | .hoge | 10点 |
| 擬似クラス | a[href*="google"] | 10点 |
| 要素名 | ul | 1点 |
| 擬似要素 | :first-child | 1点 |
| 全称セレクタ | * | 0点 |
以上！
