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]相关联。）

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