哪个选择器更强?
#nav li.current
或者
div #nav li
第二个
a.test
或者
.test .test
答案是什么?
从规格:
选择器的特异性计算如下:
- 计算选择器中 ID 选择器的数量 (= a)
- 统计选择器中的类选择器、属性选择器和伪类的数量(= b)
- 计算选择器中类型选择器和伪元素的数量 (= c)
- 忽略通用选择器
否定伪类中的选择器与其他选择器一样计算,但否定本身不计为伪类。
连接三个数字 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