大規模開発になればなるほどcssのスタイルで何が優先されるかわかりにくくなります
ここでは優先順位を順番に説明します
1位 !important指定
p {
color: red !important;
}
p#sampleId {
color: blue;
}
この場合は赤が優先です
2位 インラインスタイル指定
<head> <style type="text/css"> .sampleClass { color: red; } p#sampleId { color: blue; } </style> </head> <body> <p id="sampleId" class="sampleClass" style="color: blue;">文</p> </body>
この場合は青です
3位 idセレクタ指定
#sampleId {
color: red;
}
.sampleClass {
color: blue;
}
この場合は赤です
4位 classセレクタ、属性セレクタ、疑似セレクタ指定
.sampleClass {
color: red;
}
p {
color: blue;
}
5位 後から書いたもの
p {
color: red;
}
p {
color: blue;
}
この場合は青です
!important指定
インラインスタイルで指定
idセレクタで指定
classセレクタ、属性セレクタ、疑似セレクタで指定
後から書いたもの
の順番で優先されます。
正確には宣言によってポイントが決まっていて、その合計点によって優先が決まるようです。!importantは1000点、idは100点のようです
