Question

我有一个模板类，就是：

.template{
  display: none;    
}

这允许我创建一个带有html的块，我可以使用jQuery进行克隆，并根据自己的喜好稍微编辑。但是，I类中的一个已经分配给要克隆的同一个元素，设置：

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

这最终会覆盖模板显示属性，这会使其成为模板类的全部目的。

当然，我总是可以在克隆后通过jQuery删除模板类的同时添加Category类，但它并不理想，因为重点是html应该易于编辑和更改可以在那里而不是在jQuery代码中。

思考？我想也许我可以告诉显示覆盖其他属性或类似的东西？

谢谢！

Answer 1

CSS有一个非常明确的优先顺序。

如果两个选择器具有相同的优先级（根据您的两个单类选择器），那么在所有其他条件相同的情况下，CSS代码中最后定义的那个是优先级。

因此，这里的简单解决方案是移动模板CSS以降低CSS代码。

如果由于某种原因无法做到这一点，那么最好的选择是使模板选择器更具体。例如，如果所有模板元素都包含在div元素中，并且您知道始终为true，则可以将选择器更改为div .template。它现在比.Category选择器更具体，因此应该优先。

最后，您始终可以选择!important。如果可能的话，我尽量避免使用它，因为如果过度使用会导致问题，但是在需要它的情况下会出现这种情况，事实上，像这样的情况是关于!important {{1}}最合理的用例我可以想到。

Answer 2

这正是!important的作用;将其添加到您的价值中。

Answer 3

有两种选择：

推荐：CSS中类定义的顺序非常重要，请确保您真正想要的类是在另一个之后。
不推荐：在句子末尾使用!important不推荐使用{1}}，因为如果你需要在它更复杂之后重写它。

Answer 4

要获得快速解决方案，您可以简单地使您的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将显示为bloc，但外部不会显示。

更具体的css规则是，它们更“自然重要”。在我的代码中，div .otherdiv将显示绿色backgroupd，因为body .otherdiv比.otherdiv更重要

请参阅有关css特异性的文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

“从0开始，为style属性添加1000，为每个ID添加100，为每个属性，类或伪类添加10，为每个元素名称或伪元素添加1。”

建议不要使用!important，并且并非所有浏览器都支持

Answer 5

添加！对.Category重要。

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

Answer 6

.template.Category {
  display: none;
}

或者只是使用！important

.template {
  display: none !important;
}

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

6 个答案: