css - 使用多个相互矛盾的 css 文件时的优先顺序

Question

当在同一页面上使用多个 css 文件并且它们发生冲突时，我怎么知道要使用哪个？例如，如果一个说蓝色 body 背景，另一个说红色。

Answer 1

快速回答:

如果两段 CSS 具有相同的 specificity (例如，它们都是 body{)，那么最后调用的那个将覆盖前一个。

但是，如果某些东西具有更高的特异性(更具体的选择器)，则无论顺序如何都会使用它。

---

示例 1:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    .name { color: blue; }
    .name { color: red; }
</style>

上面的例子将使颜色变成红色。两个选择器是相同的，因此也具有相同的特异性。因为 CSS 从上到下读取，我们首先告诉它是蓝色的，然后我们通过告诉它“没关系，让它变成红色”来覆盖它。

---

示例 2:

<div class="container">
    <div class="name">Dave</div>
</div>

<style>
    #container .name { background-color: blue; }
    .name { background-color: red; }
</style>

上面的例子将使背景色变成蓝色，尽管蓝色是第一个因为选择器是more "specific"。 .

---

异常(!important 的使用):

包含 !important将覆盖特异性和顺序，但在我看来，只有在您试图破坏您无权以任何其他方式更改它的第三方代码时才应使用。

---

外部 CSS:

覆盖规则对外部 CSS 文件同样有效。想象一下，将它们从头到尾、从上到下排列。在第一个文件中调用的选择器将被任何后续文件中的相同特异性选择器覆盖。但在同一个文件或多个文件中，特异性仍然胜过顺序。

---

如何测试:

在 Chrome、Firefox 和现代版本的 IE(可能还有 Safari)中，您可以右键单击某些内容并单击“检查元素”。这将向您显示 HTML 以及任何应用的 CSS。当您向下滚动 CSS(通常在右侧)时，您会看到被划掉的东西——这意味着它们要么是不正确的 CSS，要么已被覆盖。要进行测试，您可以修改 CSS 选择器(在您自己的代码中或在开发人员工具框中)以使其更具体，然后查看是否会取消划掉……等等。试用该工具 - 它非常有用。

不确定某事有多“具体”？尝试一些在线 CSS 特异性工具:

• https://polypane.app/css-specificity-calculator
• https://specificity.keegan.st/
• https://www.codecaptain.io/tools/css-specificity-calculator