我有输入文字

<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;

}


谢谢
巴罗兹

最佳答案

我非常喜欢此规则(引用此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。 )

09-25 16:58
查看更多