CSS：可以用另一個類覆蓋一個類嗎？

我有一個模板類，那很簡單：CSS：可以用另一個類覆蓋一個類嗎？

.template{ 
    display: none;  
}

這讓我創建HTML塊，我可以克隆使用jQuery和稍微編輯我的胃口。然而，類我已經分配給被克隆此相同的元素，集之一：

.Category{ 
    display:table-row-group; 
    //other properties not related to this problem not shown 
}

這結束了重寫模板顯示性能，這違背了使它成爲一個模板類的全部目的。

當然，我總是可以在添加Category類的同時，在克隆後通過jQuery刪除模板類，但這並不理想，因爲整個問題是html應該易於編輯並且可以進行更改而不是在jQuery代碼中。

想法？我想也許我可以告訴顯示器來覆蓋其他屬性或類似的東西？

謝謝！

來源

2013-10-29 hughmanwho

支持不要使用'顯示：none'隱藏你的模板。相反，將它們放在'

這正是!important做;再加上你的價值。

來源

2013-10-29 14:40:42 SLaks

您不能在要求提供的問題中將'！important'添加到CSS類。 –

加入！重要的.Category。

.Category{ 
    display:table-row-group; 
    //other properties not related to this problem not shown 
}

來源

2013-10-29 14:43:19 schnawel007

.template.Category { 
    display: none; 
}

或者只是使用重要

.template { 
    display: none !important; 
}

來源

2013-10-29 14:43:24

有兩種選擇：

推薦：在CSS類定義的順序真的很重要，一定你真正想要的課程在另一個之後。
不推薦：在句子末尾使用!important不建議使用，因爲如果您在需要更復雜之後需要覆蓋它，

來源

2013-10-29 14:46:00 DaniP

對於一個快速的解決方案，你可以簡單地讓你的CSS規則更具體：

body .Category{ 
    display:table-row-group; 
//other properties not related to this problem not shown 
}

可以說你有這樣的代碼：

<html> 
<head> 
    <style> 
    div{background-color:#ccc} 
    #content .Category{display:block;} 
    .template{display:none;} 
    .otherdiv{background-color:red;} 
    body .otherdiv{background-color:green;} 
</style> 
</head> 
<body> 
    <div id="content"> 
    <div class="template Category" >inner template div</div> 
    </div> 
    <div class="template">outer template div</div> 
    <div class="otherdiv">outer other div</div> 
</body> 
</html>

的inner template div將顯示爲集團，但外面不會。

更具體的你的CSS規則，更「自然重要」，他們是。在我的代碼，在div .otherdiv將用綠backgroupd顯示，因爲body .otherdiv更重要的是比.otherdiv

請參閱文章有關CSS具體http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

「從0開始，加1000樣式屬性，加100對於每個ID，爲每個屬性，類或僞類添加10，爲每個元素名稱或僞元素添加1。「

使用!important不建議在所有的，而不是由所有的瀏覽器

來源

2013-10-29 14:53:50 Asenar

相關問題