jQuery CSS：是否可以用另一个类覆盖一个类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19661277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Is it possible to override one class with another?
提问by hughmanwho
I have a template class, that is simply:
我有一个模板类，这很简单：
.template{
display: none;
}
This allows me to create a block with html that I can clone using jQuery and slightly edit to my liking. However, one of the class I've been assigning to this same element to be cloned, sets:
这允许我创建一个带有 html 的块，我可以使用 jQuery 克隆它并根据我的喜好稍微编辑。但是，我一直分配给要克隆的同一元素的类之一设置：
.Category{
display:table-row-group;
//other properties not related to this problem not shown
}
This ends up overriding the template display property, which defeats the whole purpose of making it a template class.
这最终会覆盖模板显示属性，这违背了使其成为模板类的全部目的。
Certainly I can always just add the Category class at the same time as I remove the template class via jQuery after cloning, but it's not ideal because the whole point is that the html should be easy to edit and changes can be made there instead of within jQuery code.
当然，我总是可以在克隆后通过 jQuery 删除模板类的同时添加 Category 类，但这并不理想，因为重点是 html 应该易于编辑并且可以在那里而不是在内部进行更改jQuery 代码。
Thoughts? I'm thinking maybe I can tell display to override other properties or something like that?
想法？我在想也许我可以告诉 display 覆盖其他属性或类似的东西？
Thank you!
谢谢！
回答by Spudley
CSS has a very well-defined order of priority.
CSS 有一个非常明确的优先级顺序。
If two selectors have the same priority (as per your two single-class selectors), then with all else being equal, the one which is defined last in the CSS code is the one that takes priority.
如果两个选择器具有相同的优先级（根据您的两个单类选择器），那么在所有其他选择器都相同的情况下，在 CSS 代码中最后定义的选择器具有优先级。
So the simple solution here is to move your template CSS to lower down your CSS code.
所以这里的简单解决方案是移动您的模板 CSS 以降低您的 CSS 代码。
If you can't do that for whatever reason, your best option is to make the template selector more specific. For example, if all your template elements are contained inside a div element and you know that's always going to be true, you could change the selector to div .template. It is now more specific than the .Categoryselector, and should therefore take precedence.
如果由于某种原因你不能这样做，你最好的选择是使模板选择器更具体。例如，如果您的所有模板元素都包含在一个 div 元素中并且您知道这总是正确的，您可以将选择器更改为div .template. 它现在比.Category选择器更具体，因此应该优先。
Finally, you always have the option of !important. I try to avoid using it if possible, as it tends cause issues if overused, but it is there for cases where it's needed, and in fact, cases like this are about the best justified use-case for !importantI can think of.
最后，您始终可以选择!important. 如果可能的话，我尽量避免使用它，因为如果过度使用它往往会导致问题，但它适用于需要它的情况，事实上，像这样的情况是!important我能想到的最合理的用例。
回答by SLaks
That's exactly what !importantdoes; add that to your value.
这正是!important它的作用；将其添加到您的价值中。
回答by Asenar
For a quick solution, you can simply make your css rule more specific:
要获得快速解决方案，您可以简单地使您的 css 规则更加具体：
body .Category{
display:table-row-group;
//other properties not related to this problem not shown
}
lets say you have this code :
假设你有这个代码：
<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>
The inner template divwill be displayed as bloc, but the outer will be not.
在inner template div将显示为集团，但外将不。
More specific your css rules are, more "naturally important" they are. In my code, the div .otherdivwill be displayed with a green backgroupd because the body .otherdivis more important than .otherdiv
您的 css 规则越具体，它们就越“自然重要”。在我的代码中，div.otherdiv将显示为绿色 backgroupd，因为它body .otherdiv比.otherdiv
See that article about css specificity http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
请参阅有关 css 特异性的文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
"Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element."
“从0开始，样式属性加1000，每个ID加100，每个属性、类或伪类加10，每个元素名称或伪元素加1。”
using !importantis not recommended at all, and is not supported by all browsers
!important完全不推荐使用，并且并非所有浏览器都支持
回答by DaniP
There are two options :
有两种选择：
Recommended: The order of the class definition in the CSS really matters, be sure that the class you really want is after the other.
Not recommended: Use
!importantat the end of the sentence it is not recommended because if you need to override this after it's gonna be more complicated.
推荐：CSS 中类定义的顺序真的很重要，请确保您真正想要的类在另一个之后。
不推荐：
!important在句尾使用它是不推荐的，因为如果你需要在它之后覆盖它会更复杂。
回答by schnawel007
Add !IMPORTANT to the .Category.
将 !IMPORTANT 添加到 .Category。
.Category{
display:table-row-group;
//other properties not related to this problem not shown
}
回答by Artek Wisniewski
.template.Category {
display: none;
}
Or just use !important
或者只使用 !important
.template {
display: none !important;
}
