未按順序加載CSS屬性

對於諸如input[type="submit"]之類的東西是否有任何特定規則？我遇到了以看似不正確的順序加載的CSS屬性的問題。未按順序加載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的邊界之外運作。

任何人都可以擺脫它嗎？

來源

2014-03-26 JoeP

*「......但我不明白爲什麼我必須這樣做。」* - 這就是所謂的選擇特異性：http://coding.smashingmagazine.com/2007/07/27/css-specificity -things-you-should-know/ – fcalderan

原因是選擇器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）。

來源

2014-03-26 14:22:27

這是一個非常好的解釋，謝謝，我改變了我接受的答案 – JoeP

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

來源

2014-03-26 13:38:50

問題中的代碼沒有ID選擇器（也沒有'id'屬性）。 –

未按順序加載CSS屬性

回答

相關問題