1) #divID input[type='text']
{
height:30px;
}
2) #divID .ClassName
{
height:40px;
}
对于div 中的文本框,我定义了上述样式。 2比1更具体,但是渲染高度是30px。它是如何工作的?
最佳答案
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
关于html - CSS 属性特异性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14515263/