是否可以让一个 CSS 类优先于另一个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3671551/
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
Is it possible to give one CSS class priority over another?
提问by Abe Miessler
Say I have a div that uses two css classes that both use text-align, but one is centered and the other is right aligned.
假设我有一个 div，它使用两个都使用 text-align 的 css 类，但一个居中，另一个右对齐。
Is it possible to specify something that will give one class priority over the other?
是否有可能指定一个类优先于另一个类的东西？
回答by meder omuraliev
- specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
- assign it after the other class
- if two classes are in separate files, import the priority file second
- !important
- 指定一个更具体的选择器，例如在它之前添加一个 ID 或在类之前添加节点名的前缀
- 在其他班级之后分配它
- 如果两个类在单独的文件中，则第二个导入优先级文件
- ！重要的
!importantis the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !importantyou can't use it to make some other rule even moreimportant.
!important是懒惰的方式，但你真的应该去#1 以避免重要的概念。一旦你添加了一个，!important你就不能用它来使其他规则变得更加重要。
回答by Brian Campbell
If you want to be explicit about it, you can specify how the combination of those two classes work together, by supplying a rule for elements that contain both classes. For instance, you can explicitly give something with both classes fooand barthe same styling as just baras follows. This works because .foo.baris more specific than just .foofor elements which have both classes, and thus this rule will take precedence over the .foorule.
如果您想明确说明它，您可以通过为包含这两个类的元素提供规则来指定这两个类的组合如何协同工作。例如，您可以显式地给出具有两个类foo和bar相同样式的内容bar，如下所示。这是有效的，因为.foo.bar它比.foo具有两个类的元素更具体，因此此规则将优先于.foo规则。
.foo { text-align: center }
.bar, .foo.bar { text-align: right }
If you don't want to be this explicit, you could just place the rule for barafter the rule for foo, as given selectors of the same specificity, later rules take precedence over earlier ones:
如果您不想如此明确，您可以将规则 for 放在规则 forbar之后foo，因为给定的选择器具有相同的特性，后面的规则优先于前面的规则：
.foo { text-align: center }
.bar { text-align: right }
You can learn more about how precedence between rules is determined in the CSS specification chapter about the cascade; that's the "C" of CSS, and is important to understand well in order to take full advantage of CSS.
您可以在 CSS 规范关于级联的章节中了解有关如何确定规则之间优先级的更多信息；这是 CSS 的“C”，为了充分利用 CSS，理解它很重要。
回答by Johan
You should use CSS specificity to override previous declarations http://htmldog.com/guides/cssadvanced/specificity/
您应该使用 CSS 特异性来覆盖以前的声明 http://htmldog.com/guides/cssadvanced/specificity/
p = 1 point
.column = 10 points
#wrap = 100 points
So:
p.column { text-align: right; }can be overwritten by:
body p.column { text-align: left; }
所以：
p.column { text-align: right; }可以被覆盖：
body p.column { text-align: left; }
回答by dexiang
as “meder omuraliev” has answered, you may use a more specified selector. and I would like to provider a general way that how to sepcific a higher priority for any type of selector, that is use the attr presdeo.
正如“meder omuraliev”所回答的那样，您可以使用更具体的选择器。我想提供一种通用方法，即如何为任何类型的选择器指定更高的优先级，即使用 attr presdeo。
for example:
例如：
html body .foo { font-family: Arial !important;}
html body .bar[attr]{ font-family: Arial !important;}
to override this you may use like this:
要覆盖它，您可以像这样使用：
html body .foo:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
html body .bar[attr]:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
