CSSセレクタの優先度の計算

CSSを組むときって知らず知らずのうちに優先度などを考えてセレクタを指定していると思います。
実際俺もそうでした。
でも、ちゃんと計算方法を知っておくと、やたらめたら「!important」を使うことや、上の階層のクラスからセレクタ引用してセレクタが冗長になってしまうなんてことを避けることができます。

まあ、個人で制作から運営までしているサイトなら上記ようなの事態に陥ることは少ないとは思うのですが、web制作を仕事としている場合にはそんな事態に少なからず出会ったことがあるはず。

そこで、CSSセレクタの優先度の計算式。
それぞれに決まった点数をつけることで決まるらしい。

タグのstyle属性（1000点）
例：<p style="font-color:#00F;">
ID（100点）
例:#hoge {font-color:#00F;}
疑似クラス（10点）
例:a:hover {font-color:#00F;}
※疑似クラス単体で記載することはないので、例の場合は要素+疑似クラスで11点となる
属性セレクタ（10点）
例:a[href*="google"] {font-color:#00F;}
※属性セレクタ単体で記載することはないので、例の場合は要素+属性セレクタで11点となる
クラス（10点）
例:.hoge {font-color:#00F;}
擬似要素（1点）
例:a:first-letter {font-color:#00F;}
※擬似要素単体で記載することはないので、例の場合は要素+擬似要素で2点となる
要素（1点）
例：ul {font-color:#00F;}
全称セレクタ（0点）
例：* {font-color:#00F;}

疑似クラスと疑似要素の区別が難しく感じるが、疑似要素は下記の四つしかないので覚えてしまうべし。
※:first-childは疑似クラスだったりするのでしっかり覚える。

:before
:after
:first-line
:first-letter

では、実際に試してみよう！
上記の点数の理論が本当かどうかこちらのページで色々試してみた。

CSSセレクター実験

はい、実験の結果は上記の理論は正しくない！ということでした。

では、何が正しい計算方法なのか？いろいろググってみると、こんな考え方がでてきた。

AをインラインCSS、BをID、Cを属性/クラス/疑似クラス、DをHTMLタグ/疑似要素とする。
それをもとにすると、セレクタの点数は以下のようになる。

セレクタ	A	B	C	D	点数
*（全称セレクタ）	0	0	0	0	0.0.0.0
h1（要素）	0	0	0	1	0.0.0.1
.c001（クラス）	0	0	1	0	0.0.1.0
a[title]（属性）	0	0	1	0	0.0.2.0
#id001（ID）	0	1	0	0	0.1.0.0
style=””（インライン）	1	0	0	0	1.0.0.0
div.c001 p	0	0	1	2	0.0.1.2
div.c001 a[title]	0	0	2	2	0.0.2.2
.a.b.c.d.e.f.g.h.i.j	0	0	10	0	0.0.10.0