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]是在第二级别是伪类.

元素和伪元素位于最低级别.

在一个层面上的关系进入下一个层次.两个规则集都与ID和类/属性级别相关联(.ClassName并且[type=text]是绑定的).

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