Question

input[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除margin设置之外的所有样式，当我检查Chrome中的元素时，我可以看到它被划掉以支持早期的风格。这让我对CSS的理解抛到了窗外，因为我觉得它按顺序工作 - 并且在过去的每一种情况下都是如此。

例如，我可以按顺序设置h6 {margin: 5px;}和.h6Test {margin: 0px; }，并且所有浏览器仍然会识别之后分配的“类”并覆盖任何<h6 class="h6Test">标记的默认边距。

我可以强制样式生效input[type="submit"].inputSubmit，所以我已经达到了我需要的结果，但我不明白为什么我必须这样做。这就是让我觉得这是一种“特殊”类型的属性，由于某种原因在正常CSS的边界之外运行。

有人可以对此有所了解吗？

Answer 1

原因是选择器input[type="submit"]具有比选择器.inputSubmit更高的特异性。具有更具体选择器的规则“获胜”。这与加载订单无关。

根据cascade规则（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）。

Answer 2

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）更具体。 W3C CSS 2.1 Specification

CSS属性未按顺序加载

2 个答案: