html - CSS 属性特异性

Question

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

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

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

score 7 · Accepted Answer

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

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

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

类和属性.ClassName, [type=text],[id=x]和伪类一样位于第二层。

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

一个级别的关系移动到下一个级别。两个规则集都与 ID 和类/属性级别相关联（.ClassName并且[type=text]是相关联的）。

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

1 回答 1