正しく設定しているのに、CSSが反映されない時、CSS詳細度が影響しているケースが
あります。CSS詳細度はスタイルの適用を判定する優先順位のようなもので、その順位が高いほど、スタイルの設定が優先されます。
①インラインスタイル: htmlなどに直接指定されたスタイルが最も詳細度が高いです。
例: <div style="color: red;">...</div>
②IDセレクタ: #id の形式のセレクタが次に詳細度が高いです。クラスと違い、唯一のため、詳細度が高いと思われます。 例: #Idname
③クラスセレクタ、属性セレクタ、擬似クラス: .classname、[attr=value]、:hover のようなセレクタがこのカテゴリに属します。
④要素セレクタと擬似要素: p、div、::before のようなセレクタがこれに該当します。
上記の詳細度以外も優先順位があり、「何で効かないの？」と思ってしまうケースが多いです。同じクラス名を後から上書きしていたなどのケアレスミスもあり、長時間悩んでしまうケースもあります。最後の解決方法として、importantがあります。importantはCSSでのスタイル宣言の優先度を強制的に上げるための特別なキーワードです。
.text {
color: red !important;
}
上記のように使用しますが、あまり、多用しない方がいいようです。後々のメンテナンスが難しくなる。パフォーマンスが落ちるなどのディメリットもあり、最終手段と言われています。
