1) #divID input[type='text']
{
height:30px;
}
2) #divID .ClassName
{
height:40px;
}
对于div中的文本框,我定义了上述样式。 2比1更具体,但渲染高度为30px。它是如何工作的?
答案 0 :(得分:7)
2并不比1更具体.1实际上更具体。
CSS选择器分为三个级别(出于本讨论的目的;实际上更多因为style
属性和!important
)。
ID选择器#
处于最高级别。
类和属性.ClassName
,[type=text]
,[id=x]
与伪类一样位于第二级。
元素和伪元素位于最低级别。
在一个层面上的关系进入下一个级别。这两个规则集都与ID和类/属性级别相关联(.ClassName
和[type=text]
相关联。)
第一个规则集有一个元素作为选择器的一部分,但另一个没有。因此,第一个规则集在最低级别获胜。
http://css-tricks.com/specifics-on-css-specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity