爲什麼chrome不遵循CSS順序的優先順序？

我想對齊我的單選按鈕。他們是這樣實現的：爲什麼chrome不遵循CSS順序的優先順序？

<input type="radio" name="type" class="radv" value="0" />

這裏的本地文件頭中定義的樣式：

<style> 
input.radv 
{ 
    vertical-align:middle; 
    margin:0px; 
    padding-bottom:4px; 
} 
</style>

而這裏的衝突的風格，我的外部CSS文件：

input:not([type=submit]):not([type=file]):not([type=image]) { 
border: 1px solid #e1e1e1; 
background-color:#fff; 
padding:2px; 
height:18px; 
}

不知何故，外在的「輸入」風格正在走向優先。本地風格不應該優於外部CSS文件？

來源

2013-08-19 Rohan Sood

哪條線正在優先？填充？ –

以及我認爲css按照順序正確....確保你的內聯css在外部CSS後加載...所以最後一個將被應用於'DOM'。 –

是的填充。我如何確保內聯CSS最後加載？ –

從外部樣式表中的規則採取優先次序的原因是特異性。在<style>內部定義或不是無關緊要。

雖然:not()本身並沒有給出選擇權重，但每個屬性選擇符都給出了與類相同的權重。

input.radv將具有總重量，因爲一個元素選擇（0,0,1）和一個類（0,1,0）的（0,1,1）。

input:not([type=submit]):not([type=file]):not([type=image])將具有總重量，因爲一個元素選擇的（0,3,1）（0,0,1）和三個屬性選擇（0,1,0）X3並且因此優先。

注意：如果特異性是完全相同，訂單將只有重要。

瞭解更多關於CSS選擇器的特異性位置：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

來源

2013-08-19 09:54:06 xec

謝謝。我不知道這一點。 –

正如Dipesh帕爾馬說，檢查加載內嵌/外部CSS代碼的順序，

，如果你不想改變順序... 你可以隨時使用!important你想要的屬性值後到者優先：

<style> 
input.radv 
{ 
    vertical-align:middle; 
    margin:0px; 
    padding-bottom:4px !important;/*the `important` will make sure this property applies unless there is another property with `!important` value next to this one in DOM*/ 
} 
</style>

來源

2013-08-19 09:17:14 MaveRick

如何查看訂單？謝謝。 –

你必須檢查腳本中的代碼，包括命令，但如果你找不到..您可以隨時使用'chrome'通過'Developer tools'或者'Mozilla firefox'中的螢火蟲來檢查這個元素，您可以右鍵點擊您想要檢查其''css'屬性的元素並檢查右側該面板將出現在窗口的底部，以查看具有重寫屬性的所有參數以及其上的筆劃線或正確的跟隨屬性，而沒有該筆劃線的話，您可以找到「css」文件和行號包含此屬性 – MaveRick

我已經完成了所有這些，問題是我該如何調整它？我知道哪一行正在使用它，但一種樣式是在外部文件中，而另一種樣式是在同一個php的頭文件中。 –

爲什麼chrome不遵循CSS順序的優先順序？

回答

相關問題