CSS規則如何覆蓋另一個CSS規則？

所以，這是我在做什麼：CSS規則如何覆蓋另一個CSS規則？

#id-form td { 
padding: 0 0 10px 0; 
} 

#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px; 
}

我有一個表#id-form，關於這一點我將所有td s到有padding-bottom: 10px。
但在一個特殊場合，我想要一個特定的td在所有方向都有padding: 10px，我在#particular-td中設置了這個方位。

顯然，我把CSS樣式按順序放在一個外部文件中。
但是，呈現的CSS只有padding-bottom，並且padding: 10px似乎被覆蓋！？

請解釋：
如何以及爲什麼會出現這種情況？
我應該如何安排這些規則來解決我的問題（內聯樣式除外）？

編輯：我刪除了'table'之前#id-form在表中。我從來沒有使用過，我只是在這裏提到它能夠更好地解釋它。

來源

2012-10-08 Pulkit Mittal

CSS不是我的強項，但是，如果你想要特定的CSS元素有一個填充，爲什麼不把它放在元素本身的'樣式'中？這肯定會覆蓋所有其他的事情。 – ATaylor

@ATaylor內聯CSS不是一個可管理的解決方案。 –

請參閱[CSS3選擇器：9.計算選擇器的特異性]（http://www.w3.org/TR/selectors/#specificity）。 – Zeta

由於CSS Specificity。一個選擇的權重是基於彌補的組件進行評估，以給定的100加權id的，class ES爲10的權重，並element選擇用1

所以，在你的榜樣權重：

table#id-form td

擁有的102的加權（table#id是101和td爲1），而這一點：

#particular-td

擁有的100的加權如果改變到第二這個：

#id-form #particular-td

你會得到一個200的權重，它將覆蓋上一個選擇器。只有作爲最後的手段，你應該使用!important，因爲這幾乎可以防止你將它壓倒一線。

來源

2012-10-08 11:14:20

感謝兄弟。非常感謝。對我來說，早些時候理解這些東西一直是一個痛苦！ –

除此之外：內聯CSS總是擁有「最高權重」，除非你使用'！important' – Rockbot

-1

試試這個代碼，我已經加入！到你的CSS重要的是，在此模式下可以ovveride表＃ID-表格TD

#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px !important; 
}

來源

2012-10-08 11:11:22

這會在IE中工作嗎？我聽說這會造成IE的一些問題？ –

使用'！important'不是去這裏的路。這應該是最後的解決方案。 –

我同意Christofer，再加上我想知道這個壓倒一切的原因，因爲不管怎樣，我都可以在最後使用內聯樣式。 –

這與專一做填充。 table#id-form td比#particular-td更具體。具有更高特異性的規則優先於特異性更低的規則。

這裏有一些資源，讓你開始瞭解它是如何工作：

關於使用很重要，因爲別人建議：

人們可能會傾向於使用!important關鍵字來排序了這一點，但很少是個好主意：

它成爲維持疼痛/解決
它打破了CSS
規則不能被其他規則以後

重寫它可能需要幾分鐘對特異性讀了，但是這將是非常值得當你得到它的掌握所花費的時間。

來源

2012-10-08 11:12:40

+1鼓勵進一步閱讀 - 在我明白特殊性之前，我曾經花費無數個小時來抨擊我的頭腦，想知道爲什麼它不像我預期的那樣「級聯」。 –

\ +1爲特異性計算器。 – Chloe

如果你堅持使用'！important'意大利麪條，請注意，'！important'屬性可以被其他'！important'屬性覆蓋[當包含它們的規則集具有更高的特異性時]（https：// jsbin .COM/puvazu /編輯？CSS，輸出）。 **不要**實際上做到這一點！ – misterManSam

你有兩種方法，要麼加！重要的填充爲特定-TD後：

padding: 10px !important;

OR，您的選擇改變，像這樣：

table#id-form td#particular-td { 
border: 1px solid black; 
text-align: center; 
background-color: #DFDFDF; 
height: 30px; 
padding: 10px; 
}

兩者都是罰款。就我個人而言，我不喜歡使用！重要的，如果我能避免它。

來源

2012-10-08 11:13:46

CSS規則如何覆蓋另一個CSS規則？

回答

相關問題