css中的覆盖无论文件中的顺序如何

Question

我有输入文字

<input type="text" class="name">

有人可以解释为什么这个ccs角色

   input[type="text"], input[type="search"], input[type="password"] {

        background: none repeat scroll 0 0 #FFFFFF;
}

倍率

.name{background:yellow}

无论css文件中的顺序（谁先出现）。

但是如果我指定父类的名称，则覆盖是相反的

例如

.form .name {
  background:yellow

}

覆盖此

 input[type="text"], input[type="search"], input[type="password"] {

        background: none repeat scroll 0 0 #FFFFFF;

}

感谢 Baaroz

Answer 1

我非常喜欢这条规则（引用此wonderful article）来衡量选择器的特异性：

  

计算选择器（= a）中ID属性的数量。伯爵   选择器中的其他属性和伪类的数量（= b）。   计算选择器中元素名称和伪元素的数量   （= c）。连接三个数字a-b-c给出了特异性

对于.name选择器，它只是0-1-0 - 只是一个类名。

对于.form .name，它是0-2-0 - 两个类名。

对于input[type="text"]，它是0-1-1，因为属性选择器与元素名称相结合。显然，它比0-1-0更具体，但小于0-2-0。 ）