css - 为什么这具有更高的 css 优先级？

Question

为什么会这样:

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
    width: 180px;
    padding-bottom: 5px
}

比这个有更高的优先级:

.cssform.wide input[type="text"]{ 
    width: 500px;
    padding-bottom: 5px
}

第一个有 1 个类和 1 个元素:(0,0,1,1) 第二个有 2 个类和 1 个元素:(0,0,2,1)

但应用了第一种样式(IE8 和 FF)。为什么会这样？

Answer 1

您的 html 中有错误。 您提供的 CSS 与以下 html 代码完美匹配:

 <form class='cssform wide'>
  <input type="text" />
 </form>

而 .cssform.wide input[type="text"] 选择器有更高的优先级。 您可以在jsfiddle查看