jquery - CSS:是否可以用另一个类覆盖一个类？

Question

我有一个模板类，它很简单:

.template{
  display: none;    
}

这允许我创建一个带有 html 的 block ，我可以使用 jQuery 克隆它并根据我的喜好稍微编辑它。但是，我一直分配给要克隆的同一元素的其中一个类设置:

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

这最终覆盖了模板显示属性，这违背了将其作为模板类的全部目的。

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

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

谢谢!

Answer 1

CSS 具有定义明确的优先顺序。

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

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

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

最后，您始终可以选择 !important。如果可能，我会尽量避免使用它，因为如果过度使用它往往会导致问题，但在需要它的情况下它就在那里，事实上，像这样的情况是关于 !important 我能想到。