スタイルの優先順位

【スタイル指定方法の優先順位】

⑴「!important」

⇨p{color: red; !important}

⑵<p style="color: red;"></p>

⇨html内に記述する

⑶p#title{color: red;}

⇨要素指定したid属性（この場合、pタグのid属性title）

⑷p.button{color: red;}

⇨要素指定したclass属性（この場合、pタグのclass属性button）

⑸書いた順番

⇨最後に書いたものが適用

指定したスタイルと違うスタイルが適用された場合には、スタイルの優先度を確認する

※要素の特定が高いほど優先度が高くなる

【セレクタの種類】

・*　

全適用⇨*{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;}