Question

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

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

Answer 1

这取决于。 CSS代表Cascading Style Sheets，并且有一个特定的顺序，应用样式，覆盖以前的样式。没有太多细节：

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

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

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

具有较少的特异性：

body a {
    color: orange;
}

。 ID选择器具有比类选择器更高的特异性，类选择器具有与伪类选择器相同的特异性，其具有比标签选择器更高的特异性。因此，如果您的所有内容都包含在<div> id content的{{1}}中，您就可以覆盖如下所示的样式：

body a {
    border: 0;
}

使用：

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

Answer 2

应首先加载boostrap样式表，然后加载样式表，这样就可以选择覆盖。

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

<强>级联

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

Answer 3

查看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; }

文字为蓝色。规则的顺序无关紧要。

Answer 4

如果您可以增加specificity of styles，则可以在不!important的情况下执行此操作。

例如：

HTML

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

CSS

div a {}

如果您在#selector

中提供特定课程，则会被忽略

.specific { }

这是demo解释我的观点。基本上，我们的想法是尽可能地定义样式。

覆盖样式没有！重要

4 个答案: