CSSでスタイルを設定する際には、セレクタの「詳細度」を意識することが大切です。ユニバーサルセレクタは影響せず、タイプセレクタ(要素名)よりもクラスセレクタや属性セレクタが、さらにIDセレクタが優先される、というのが詳細度のルールです(p.078)。指定したスタイルがうまく適用されない問題は、すでに指定されているスタイルの詳細度が高いことが原因になっていることが多いものです。
IDセレクタやクラスセレクタ、子孫セレクタを無秩序に使ってしまうとこのような問題が発生しがちです。CSSのソースコード全体として、どのようにセレクタを記述するか、たとえば「IDセレクタやクラスセレクタに要素タイプをつけるのかどうか」、「子孫セレクタでは要素の親子関係をどの程度詳しく書くのか」といったことを決めておくことが大切です。
また、詳細度が同じスタイルについては、あとから記述したものが優先(上書き)されるという読み込み順序のルールも覚えておきましょう(p.079)。link要素や@importでCSSファイルを複数読み込む際も、あとから読み込んだものが優先されます。
コメントする