为什么它具有更高的css优先级？_Css

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

css

为什么它具有更高的css优先级？,css,Css,为什么会这样： .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个元素

为什么会这样：

.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）。为什么会这样？

您的html中有一个错误。您提供的CSS与以下html代码完全匹配：

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

和

.cssform.wide输入[type=“text”]

选择器具有更高的优先级。

您可以在

处根据CSS规范规则进行检查，应该应用第二条规则。但是，只有当它同时符合这两个规则时。您可能会应用此规则对于输入元素（对于您的情况来说是自然的），但是您的css规则会查找类为

wide

的元素的后代输入元素。因此，使用

.cssform input.wide

代替

.cssform.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.首选

中的规则，而不是来自其他来源的规则 2.首选在选择器中具有更多ID属性的规则 3.首选选择器中具有更多其他属性和伪类的规则 4.首选在选择器中具有更多元素名称和伪元素的规则

如果不够清楚，您可以始终使用以下工具检查规则特定性：

您的HTML元素真的同时具有这两个类吗？还要注意的是，特异性是以三元组而不是四元组计算的，属性选择器的计算方式与类相同，因此（0,2,1）和（0,3,1）分别计算-请参阅，它们工作正常。一定是出了什么问题。我们可以看到HTML吗？您可能需要在

.cssform

和

.wide

之间留一个空格。请尝试交换它们在CSS文件中的位置。@Maheep这不会有什么区别。请在我的JSFIDLE中试用。@Kyle:没有，但是@yko说这是可以与提供的CSS一起工作的HTML（它确实如此），所以OP必须有不同的、不正确的HTML。这就是我提供自己的HTML片段的原因。OP可以很容易地将我的代码片段与现有的html进行比较——也许他只是有一些错误或打字错误。