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

Question

我有一个模板类，简单地说：

.template{
  display: none;    
}

这允许我用html创建一个块，我可以使用jQuery克隆它，并根据我的喜好进行稍微的编辑。但是，我分配给这个要克隆的元素的类之一设置：

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

这样做的结果是重写模板显示属性，从而使其成为模板类的整个目的都失败了。

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

有什么想法？我在想，也许我可以告诉display来覆盖其他属性或者类似的东西？

谢谢!

Answer 1

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

如果两个选择器具有相同的优先级(按照您的两个单类选择器)，那么如果其他所有选择器都是相等的，那么在CSS代码中最后定义的一个选择器就是获得优先级的选择器。

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

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

最后，您始终可以选择!important。如果可能的话，我尽量避免使用它，因为如果过度使用它可能会引起问题，但是它适用于需要它的情况，实际上，这样的情况是关于!important的最佳合理用例--我可以想到。

Answer 2

这正是!important所做的，将其添加到您的价值中。

Answer 3

有两种选择：

1. 推荐: CSS中类定义的顺序非常重要，请确保您真正想要的类是后面的类。
2. 不推荐:在句子末尾使用!important，这是不建议的，因为如果您需要重写它之后，它将变得更加复杂。