CSS属性未按顺序加载

对于诸如

输入[type=“submit”]

之类的事情，是否有任何特定的规则？我遇到了CSS属性加载顺序似乎不正确的问题

在CSS样式表的第400行，我有以下内容：

input[type="submit"] {
margin: 5px;
}

这是提交按钮的标准设置。但是，我有一个特殊的提交按钮，我想用不同的样式，它在我的CSS样式表的第800行，所以我认为它会覆盖以前的样式：

.inputSubmit {
margin: 0;
margin-left: 5px;
font-size: 13px;
line-height: 18px;
vertical-align: middle;
color: #555555;
border: 1px solid #cccccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

我的HTML如下所示：

<div style="position: absolute; bottom: 0; right: 0;">
<form method="get" name="search">
<input type="text" name="searchBox" class='inputText'>
<input type="submit" value="search" class='inputSubmit'>
</form>
</div>

页面加载时，“提交”按钮将加载

inputSubmit

的所有样式，但

边距

设置除外，当我检查Chrome中的元素时，我可以看到该设置被划掉，取而代之的是早期样式。这把我对CSS的理解抛到了脑后，因为我认为它是按顺序工作的——而且在过去的任何情况下都是如此

例如，我可以按该顺序设置

h6{margin:5px；}

和

.h6Test{margin:0px；}

，所有浏览器仍然可以识别随后分配的“类”，并覆盖任何

标记的默认边距

我可以通过应用

input[type=“submit”].inputSubmit

强制样式生效，因此我已经实现了我需要的结果，但我不明白为什么我必须这样做。这就是为什么我认为这是一种“特殊”类型的属性，出于某种原因，它在正常CSS的边界之外运行

---

有人能解释一下吗？

ID选择器比属性选择器具有更高的特异性。

例如，在HTML中，选择器#p123在级联方面比[id=p123]更具体

A:
a#a-02 { background-image : url(n.gif); }

and

B:
a[id="a-02"] { background-image : url(n.png); }

---

第一条规则（A）比第二条规则（B）更具体

原因是选择器

input[type=“submit”]

比选择器

具有更高的特异性。具有更具体选择器的规则“获胜”。这与装货单无关

根据规则（CSS的一个关键部分，层叠样式表，但大多数人误解），
input[type=“submit”]
具有特殊性0,0,1,1（一个属性选择器，一个元素选择器），而
.inputSubmit
具有特殊性0,0,1,0（仅一个类选择器，计为属性选择器）。使用
input[type=“submit”].inputSubmit
可以得到0,0,2,1，这很好。实际上，
[type=“submit”].inputSubmit
就足够了（特异性0,0,2,0）。
“…但我不明白为什么我必须这样做。”-它被称为选择器特异性：问题中的代码没有ID选择器（也没有
ID
属性）。这是一个非常好的解释，谢谢，我已经更改了对此的公认答案