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

CSS：可以用另一个类覆盖一个类吗？

相关问题