html - CSS 属性特异性

Question

1)  #divID input[type='text']
    {
       height:30px;
    }

2)  #divID .ClassName
    {
       height:40px;
    }

对于div 中的文本框，我定义了上述样式。 2比1更具体，但是渲染高度是30px。它是如何工作的？

Answer 1

2 并不比 1 更具体。1 实际上更具体。

CSS 选择器分为三个级别(出于本次讨论的目的；实际上还有更多级别，因为 style 属性和 !important)。

ID 选择器 # 处于最高级别。

类和属性 .ClassName、[type=text]、[id=x] 和伪类在第二层类。

元素和伪元素处于最低层。

一个层次上的联系会进入下一个层次。两个规则集都绑定(bind)了 ID 和类/属性级别(.ClassName 和 [type=text] 绑定(bind))。

第一个规则集有一个元素作为选择器的一部分，但另一个没有。因此，第一个规则集在最低级别上获胜。

http://css-tricks.com/specifics-on-css-specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity