覆盖 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3679426/
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
Override CSS style
提问by Zachary Wright
I am defining some CSS classes which, when applied to a table, will generate some default styling.
我正在定义一些 CSS 类，当应用于表格时，将生成一些默认样式。
For example, lets say I create a class called myTable:
例如，假设我创建了一个名为 myTable 的类：
.myTable {
th {
background-color: #000;
}
td {
background-color: #555;
}
}
So any table with the .myTable class would get those colors on th and td by default.
因此，默认情况下，任何带有 .myTable 类的表都会在 th 和 td 上获得这些颜色。
I thought that if another class were to be assigned to an individual td, then it would override the default style.
我认为如果将另一个类分配给单个 td，那么它将覆盖默认样式。
So if I had another class:
所以如果我有另一堂课：
.red { background-color: red; }
And a table:
还有一张桌子：
<table class=myTable>
<th class="red">Content</th>
<td>Hello!</td>
</table>
I thought that the "red" class would cause the background of the header to be red, rather than black. That is not the case. In order for this class to override the original, it has to be defined within the myTable class like so:
我认为“红色”类会导致标题的背景为红色，而不是黑色。事实并非如此。为了让这个类覆盖原来的类，它必须在 myTable 类中定义，如下所示：
td.red { background-color: red; }
Am I missing something here, is there another way to do this so that I could have default styles that are more easily overridden?
我在这里遗漏了什么，有没有另一种方法可以做到这一点，以便我可以拥有更容易覆盖的默认样式？
回答by ipartola
The idea is that which style to use depends on two things: how specific it the selector is, the position of rule (latest rule wins). Example:
这个想法是使用哪种样式取决于两件事：选择器的具体程度，规则的位置（最新规则获胜）。例子：
p {
background-color: red;
}
p {
background-color: blue;
}
Paragraphs will be blue. Another example:
段落将是蓝色的。另一个例子：
body p {
background-color: red;
}
p {
background-color: blue;
}
Paragraphs will be red since "body p" is more specific.
段落将是红色的，因为“body p”更具体。
Edit: Also try to avoid using !important. It is supported but a side effect is that you can never override it (ever). Thus only use it in the really extreme cases where you have no way of knowing how to construct specific enough rules (e.g.: generic print.css).
编辑：也尽量避免使用 !important。它受支持，但副作用是您永远无法覆盖它（永远）。因此，仅在您无法知道如何构建足够具体的规则（例如：generic print.css）的真正极端情况下才使用它。
回答by Robert
There are a couple ways, you can use !importantat the end of the declaration as such:
有几种方法，您可以!important在声明的末尾使用：
.red {
background-color: red !important;
}
Also, the more specific a declaration, the more prevalent it will be. So anything in table.myTable td.red {}will have more prevalence over anything in td.red{}.
此外，声明越具体，它就越普遍。所以任何 intable.myTable td.red {}都会比任何 in 更流行 td.red{}。
回答by M4N
This is all a question of the specificity of the css selectors used (i.e. how exactly does a selector match any given HTML element). The more specific a selector is, the higher the priority of its styles are.
这完全是一个关于所使用的 css 选择器的特殊性的问题（即选择器如何精确匹配任何给定的 HTML 元素）。选择器越具体，其样式的优先级就越高。
For an in-depth explanation of CSS selector specificity, have a look at this page: CSS Specificity: Things You Should Know.
有关 CSS 选择器特性的深入解释，请查看此页面：CSS 特性：你应该知道的事情。
回答by Nikita Rybak
There's a standard way to give some style priority.
有一种标准的方法可以给一些样式优先级。
td.red { background-color: red !important; }
回答by suketup
The !importantrule overrides a particular property in css.
该!important规则覆盖了 css 中的特定属性。
So in case of overriding a property you should always use it with the value.
因此，在覆盖属性的情况下，您应该始终将其与值一起使用。
More details on: https://css-tricks.com/when-using-important-is-the-right-choice/
更多详情：https: //css-tricks.com/when-using-important-is-the-right-choice/
