CSSの詳細度(specificity）のおさらい

http://www.w3.org/TR/CSS2/cascade.html#specificity

CSS2では以下の詳細度を算出している。

• a: ID属性の数
• b: classセレクタと属性セレクタと疑似クラスの数
• c: 要素名の数

※疑似要素は無視する
※style属性で定義されたプロパティは常に100

セレクタ	a	b	c	詳細度
* {}	0	0	0	詳細度=0
p {}	0	0	1	詳細度=1
p a {}	0	0	2	詳細度=2
.class {}	0	1	0	詳細度=10
p.class {}	0	1	1	詳細度=11
p a[href] {}	0	1	2	詳細度=12
a[href]:link {}	0	2	1	詳細度=21
#id {}	1	0	0	詳細度=100
#id p {}	1	0	1	詳細度=101

しかし、CSS2.1では、

• a: style属性があれば一律1
• b: ID属性の数
• c: classセレクタと属性セレクタと疑似クラスの数
• d: 要素名、擬似要素の数

※1. 擬似要素の重みが追加された
※2. style属性は詳細度max
※3. *(全称セレクタ)は計算対象外

セレクタ	a	b	c	d	詳細度
p {}	0	0	0	1	詳細度=1
p a {}	0	0	0	2	詳細度=2
p a:after {}	0	0	0	3	詳細度=3
.class {}	0	0	1	0	詳細度=10
p.class {}	0	0	1	1	詳細度=11
p a[href] {}	0	0	1	2	詳細度=12
a[href]:link {}	0	0	2	1	詳細度=21
#id {}	0	1	0	0	詳細度=100
#id p {}	0	1	0	1	詳細度=101
style=" " (セレクタではない)	1	0	0	0	詳細度=1000

ある同一の要素に対して詳細度が同じセレクタが存在するときには、後から定義したスタイル(プロパティ)が適用される。
これは当初この順序が逆だと思っていたところで、まず定義の前後関係を判断してから詳細度を判断すると思っていたが、正しくはセレクタの詳細度が優先される。