哪个CSS选择器更强？

Question

哪个选择器更强？

#nav li.current

或

div #nav li

和第二

a.test

或

.test .test

答案是什么？

Answer 1

来自spec：

  

选择器的特异性计算如下：

     

  
• 计算选择器中的ID选择器数量（= a）
  
• 计算选择器中的类选择器，属性选择器和伪类的数量（= b）
  
• 计算选择器中的类型选择器和伪元素的数量（= c）
  
• 忽略通用选择器
  

     

否定伪类中的选择器与任何其他类似，但是否定本身不算作伪类。

     

连接三个数字a-b-c（在具有大碱基的数字系统中）给出了特异性。

     

示例：

*               /* 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 */

Answer 2

您可以按照以下规则将选择器计算为点。

  

标签选择器值1分。

     

一个类选择器值10分。

     

ID选择器值100分。

     

内联样式值1000点。

#nav li.current = 100 + 1 + 10 = 111

div #nav li = 1 + 100 + 1 = 102

a.test = 1 + 10 = 11

.test .test = 10 + 10 = 20