CSS スタイルの優先順位

これを知るまでは、なぜかCSSが効かないということがよくあったのでメモ。

CSS セレクタの優先度は点数制

セレクタ	例	点数
全称	*	(0.0.0.0)
タグ	h1 p など	(0.0.0.1)
class	.container など （ .で始まるもの）	(0.0.1.0)
id	#id など（ #で始まるもの）	(0.1.0.0)

ちなみに(1.0.0.0)は、htmlにインラインで記述した場合。最強だが、基本使わない。

• 書いてある順番にかかわらず、点数の高い方が優先される

  • .container p：(0.0.1.1)
  • p.contents：(0.0.1.1)
  • .container .inner：(0.0.2.0)
  • .container p a：(0.0.1.2)
  • .main .container .contents：(0.0.3.0)

• 点数が同じ場合は、後に書いてある方が優先

参考サイト

CSSトラブルを防ぐ！セレクタの優先順位をマスターしよう

Specificity Calculator ：簡単に点数を計算できるサイト。面白い。