避免應用於子元素的CSS樣式

Question

是否有任何父子標籤樣式不適用於子標籤元素的方式？

我必須顯示一些數據，所以我希望在表中對齊它們以獲得更好的視圖。我想在桌子上應用一些樣式，使其看起來很好。我在表格中使用了一些額外的組件（如插件）。因此，如果我將任何樣式應用於表格的tr標記，那麼它們也會應用於這些組件標記（如果它們具有tr標記）。這應該不會發生......

有什麼辦法可以避免繼承？

<style> 
/*The plug-in component may have table tr tags.So the following styles should be applied to plug-in..*/ 
    table tr{ 
    background:#434334; 
    border-radius:5px; 
    } 

</style> 

Answer 1

CSS意味着像那樣繼承。如果你想「不繼承」你有幾個選擇：

1. 最佳：提高你的選擇，使它們只適用於你需要他們
2. 良好的要素：如果現有的標記不不允許您執行上述操作，通過給予需要設置樣式的元素（例如，額外的class）以幫助您改進選擇器
3. 錯誤：編寫您的選擇器以便它們適用然後編寫更多的選擇器來「撤消」結果以個案爲基礎

在你的情況，它看起來像前兩個組合的工作。你可以給一個id="foo"你的表，然後選擇更改爲

table#foo > tbody > tr { /*...*/ } 

的>是child selector，防止被應用到錶行進一步下跌的元素樹的風格。

Answer 2

一種解決方案是命名你的風格table tr.style1{ ...，然後在每個<tr>的，你可以只添加一個class屬性，即<tr class="style1">。