どのセレクターが強いですか?
#nav li.current
また
div #nav li
そして2番目
a.test
また
.test .test
答えは何ですか?
どのセレクターが強いですか?
#nav li.current
また
div #nav li
そして2番目
a.test
また
.test .test
答えは何ですか?
仕様から:
セレクターの特異性は次のように計算されます。
- セレクター内の ID セレクターの数を数える (= a)
- セレクター内のクラスセレクター、属性セレクター、疑似クラスの数を数える (= b)
- セレクター内の型セレクターと疑似要素の数を数える (= c)
- ユニバーサルセレクターを無視する
否定疑似クラス内のセレクターは、他のものと同様にカウントされますが、否定自体は疑似クラスとしてカウントされません。
3 つの数 abc を (基数が大きい数体系で) 連結すると、特異性が得られます。
例:
* /* a=0 b=0 c=0 -> specificity = 0 */ LI /* a=0 b=0 c=1 -> specificity = 1 */ UL LI /* a=0 b=0 c=2 -> specificity = 2 */ UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */ H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */ LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
次のルールに従って、セレクターをポイントとして計算できます。
タグ セレクターは 1 ポイントの価値があります。
クラスセレクターは 10 ポイントの価値があります。
ID セレクターは 100 ポイントの価値があります。
インライン スタイルは 1,000 ポイントの価値があります。
#nav li.current
= 100 + 1+10 = 111
div #nav li
= 1 + 100 + 1 = 102
a.test
= 1+10 = 11
.test .test
= 10+10 = 20