スタイル適用の優先順位
- スタイルには優先順位がある
- 指定したスタイルと違うスタイルが適用されている場合、スタイルの優先度をチェックする
- 要素の特定が高いほど（絞りこまれてるほど）優先度が高くなる
- １番：「!important」→p{color:red; !important}
- ２番：<p style="color:red;"></p> → タグの中に直接書き込まれたスタイル
- ３番：p#title{color:red;} → pタグ且つid属性がついたもの
- ４番：p.button{color:red; }→pタグ且つclass属性がついたもの
- ５番：書いた順番→一行目「p{color:red;}」二行目「p{color:blue;}」の場合、二行目（最後の行）のスタイルが適用される
- id属性は同一ページ内で一度しか使えないから優先度が高い（絞り込まれている）
- class属性は同一ページ内で複数使えるから優先度が低い
セレクタの種類
- *：全適用→*{ color:red; }
- 要素X：指定X要素に適用→p{ color:red; }
- #id属性：指定id属性名のついた要素に適用→#title{ color:red; }
- .class属性：指定class属性名についた要素に適用→.button{ color:red; }
- 要素X 要素Y：要素Xの中にある要素Yに適用→p a{ color:red; }
- 要素X＞要素Y：要素Xの直下にある要素Yに適用→p > a{ color:red; }
- 要素X.class：指定class名がついた要素Xに適用→p.button{ color:red; }
- 要素X#id：指定id名がついた要素Xに適用→p#title{ color:red; }
- 要素X:hover：要素Xにマウスが乗った時に適用→a:hover{ color:red; }
