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

查看

Answer 2

根据CSS规范规则，应该应用第二条规则。但是，只有在它符合两个规则的情况下。您可能会申请规则对于输入元素（对你的情况来说很自然），但你的css规则是寻找的具有类wide的元素的后代输入元素。因此，而不是.cssform .wide input使用.cssform input.wide：

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

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

和HTML：

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
  <form class="cssform">
    <input type="text" />
    <input class="wide" type="text" />
  </form>
</body>

一般选择规则如下： 1. <style>中的规则，而不是来自其他来源的规则 2.首选项中具有更多ID属性的规则 3.首选项中具有更多其他属性和伪类的规则 4.选择器首选

中具有更多元素名称和伪元素的规则

如果不够清楚，您可以随时使用工具检查规则的特殊性 suzyit

为什么这个css优先级更高？

2 个答案: