爲什麼這有更高的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元素：（0,0,1,1）第二個有2個類和1個元素：（0,0,2,1）

但是第一個樣式應用（IE8和FF）。爲什麼？

來源

2011-11-14 beginner_

貴HTML元素真的有兩類？還要注意，特異性是以三元組計算的，而不是四元組，並且屬性選擇器的計數方式與類相同，因此分別爲（0,2,1）和（0,3,1） - 請參見http：//www.w3 .org/TR/selectors /＃specificity – BoltClock

[This JsFiddle]（http://jsfiddle.net/5mPDV/）顯示它們工作正常。一定還有其他的錯誤。 – kapa

我們能否看到HTML，可能需要'.cssform'和'.wide'之間的空格 – Kyle

根據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

來源

2011-11-14 08:42:02 peewhy

謝謝！這工作。 –

您的html中有錯誤。您所提供 CSS完全符合以下HTML代碼：

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

而且.cssform.wide input[type="text"]選擇具有更高的優先級。您可以查看jsfiddle

來源

2011-11-14 08:30:33 yko

OP沒有提供任何HTML ... – Kyle

@Kyle：不，但@ yko說這是可以和CSS提供的HTML一起工作的HTML，所以OP必須有不同的，不正確的HTML。 –

這就是爲什麼我提供自己的html代碼片段。 OP可以輕鬆地將我的代碼片段與現有的html進行比較 - 也許他只是有一些錯誤或拼寫錯誤。 – yko

爲什麼這有更高的CSS優先？

回答

相關問題