CSS 不带 !important 的覆盖样式

Overriding styles without !important

提问by Hendrik

How is it possible to override styles specified in another style sheet?

如何覆盖另一个样式表中指定的样式？

I do not want to use the !important tag to override them. I would much rather specify a new style sheet, put styles in there. Could this be achieved by changing the load order of the style sheets?

我不想使用 !important 标签来覆盖它们。我宁愿指定一个新的样式表，将样式放在那里。这可以通过更改样式表的加载顺序来实现吗？

回答by Ry-

It depends. CSS stands for Cascading Style Sheets, and there's a specific order that styles are applied in, overwriting previous styles. Without going into too much detail:

这取决于。CSS 代表级联样式表，样式应用有特定的顺序，覆盖以前的样式。无需过多赘述：

• If your rules have the same specificity, just load your stylesheet second and everything will work fine.
• If your rules have higher specificity, the order won't matter.
• If your rules have lower specificity, you'll need to modify them to match.

• 如果您的规则具有相同的特性，只需第二次加载您的样式表，一切都会正常工作。
• 如果您的规则具有更高的特异性，则顺序无关紧要。
• 如果您的规则具有较低的特异性，则需要修改它们以匹配。

So, what's specificity? Basically, it's the sum of each selector in a rule. So this:

那么，什么是特异性？基本上，它是规则中每个选择器的总和。所以这：

a {
    background-color: black;
    color: white;
}

Has less specificity than this:

具有比这更少的特异性：

body a {
    color: orange;
}

. ID selectors have higher specificity than class selectors, which have the same specificity as pseudo-class selectors, which have higher specificity than tag selectors. So if all your content is contained in a <div>with an idof content, you would be able to override a style that looks like this:

. ID选择器比类选择器具有更高的特异性，类选择器与伪类选择器具有相同的特异性，伪类选择器比标签选择器具有更高的特异性。因此，如果您的所有内容都包含在<div>带有idof 的a中content，您将能够覆盖如下所示的样式：

body a {
    border: 0;
}

With:

和：

#content a {
    border: 1px solid black;
}

回答by Andres Ilich

The boostrap stylesheet should be loaded first, your stylesheet second, this way your overwrites will be picked up.

应该首先加载 boostrap 样式表，然后加载你的样式表，这样你的覆盖将被选中。

This is called "cascading", from the documentation:

这被称为“级联”，来自文档：

Cascading

This is the capability provided by some style sheet languages such as CSS to allow style information from several sources to be blended together. These could be, for instance, corporate style guidelines, styles common to a group of documents, and styles specific to a single document. By storing these separately, style sheets can be reused, simplifying authoring and making more effective use of network caching. The cascade defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones.Not all style sheet languages support cascading.

级联

这是一些样式表语言（例如 CSS）提供的功能，允许将来自多个来源的样式信息混合在一起。例如，这些可能是公司风格指南、一组文档通用的风格以及特定于单个文档的风格。通过单独存储这些样式表，可以重复使用样式表，从而简化创作并更有效地利用网络缓存。级联定义了样式表的有序序列，其中后面的表中的规则比前面的规则具有更高的优先级。并非所有样式表语言都支持级联。

回答by roger

look at http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html.

看看http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html。

<p class="example">
    This is a <strong>test</strong>.
</p>

strong { color: red; }
p strong { color: green; }
p.example strong { color: blue; }

The text will be blue. The order of the rules doesn't matter.

文本将是蓝色的。规则的顺序无关紧要。

回答by Starx

If you can increase the specificity of styles, you can do this without the !important.

如果可以增加样式的特异性，则无需!important.

For example:

例如：

HTML

HTML

<div id="selector">
  <a>Hello</a>
  <a class="specific">Hi</a>
</div>

CSS

CSS

div a {}

Will be ignored, if you give a specific class inside #selector

将被忽略，如果你在里面给出一个特定的类 #selector

.specific { }

Here is a demoexplaining my point. Basically, the idea is to define the styles as closely as possible.

这是一个演示，解释了我的观点。基本上，这个想法是尽可能接近地定义样式。