My Vector Space

  人生は寄り道してなんぼ

CSSが効かない!!ときのよくありがちなミス まとめ

CSSが効かない時に考えられること

● タグの前後や間に全角スペースが入っている

● セミコロン ( ; ) の記述なし

● 単純にスペルミス

CSSの優先順位がおかしい

● class名 id名が数字で始まっている

( もしくは数字のみ ※機械は数字で始まるものに対して、名前ではなく数字 数値だと認識する )

CSSが効かないという状況になった時、大概これらの部分にミスがあると考えられるが、とくに「CSSの優先順位」について細かくみていくと、

同じセレクタに対する指定が重複している場合は、後に書いたものが優先される。

p . sample { color : green ; }

p . sample { color : red ; }

p . sample { color : blue ; }

この設定の場合 文字は青になる。

この場合 最後にblueを指定している為、pの文字は青になる。

セレクタ名の優先順位 ( 優先順位を決めるポイント数で決まる )

タイプセレクタ  classセレクタ   親要素 + タイプセレクタ  < idセレクタ

. sample { color : green ; }

p . sample { color : red ; }

. sample { color : blue ; }

この設定の場合 文字は赤になる。 

この場合 最後にblueを指定しているが、その前に p というタイプセレクタを指定している為 優先順位を決めるポイント数の多い ” 赤 ” が文字色になる。

プロパティの最後に「!important」を記述すると、最優先扱いにできる

プロパティの最後に「!important」を記述すると、セレクタ名の優先順位を

無視してidセレクタよりも優先され、最優先扱いになる

. sample { color : green ! important ; }

. sample { color : red ; }

. sample { color : blue ; }

この文字は緑になる。

この場合「! important 」を指定しているからgreenが最優先で適用される。

PAGE TOP