CSS 样式表按什么顺序覆盖？答案

【问题标题】：In which order do CSS stylesheets override?CSS 样式表按什么顺序覆盖？
【发布时间】：2012-03-16 13:47:04
【问题描述】：

在 HTML 标头中，我有这个：

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.css 是我的特定页面表。 master.css 是我在每个项目中用来覆盖浏览器默认设置的工作表。这些样式表中的哪一个具有优先权？示例：第一张表包含特定的

body { margin:10px; }

和相关的边框，但第二个包含我的重置

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

本质上，CSS 的级联元素在样式表引用方面的工作方式与在典型 CSS 函数中的工作方式相同吗？意思是显示最后一行？

【问题讨论】：

我刚刚意识到这将更适合网站管理员。有没有更好的地方发布这个？
这里很好。
body:not(input="button") 不是一个有效的选择器。您可能打算将其拆分为body, input:not([type="button"])。
这很有趣。我不相信我以前见过这样的语法。我还是新手，但那些双括号对我来说是陌生的。
那些括号用于属性选择器：developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors@topic：可能你想切换样式表的顺序：你的一般master.css应该首先加载，然后更容易否决master- styles.css 中的样式。

标签： css overriding stylesheet

【解决方案1】：

编辑：2020 年 4 月，根据@LeeC 的评论，情况不再如此

是的，它的工作原理就像它们在一张纸上一样，但是：

加载顺序很重要！

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

在上面的代码中，不能保证master.css 会在styles.css 之后加载。因此，如果master.css 被快速加载，而styles.css 需要一段时间，styles.css 将成为第二个样式表，并且来自master.css 的任何具有相同特性的规则都将被覆盖。

最好在部署之前将所有规则放在一张表中（并缩小）。

【讨论】：

考虑从页面的部分加载的备用 nearly identifcal 样式表的情况，其中包含条件 media 属性以加载特定于智能手机和平板电脑的样式表。在这种情况下，如果加载顺序不确定，media 中指定的逻辑必须对每个样式表严格排他。
@n_i_c_k 你的答案不正确。 declaration 的顺序很重要，而不是 load 顺序。我刚刚用 Fiddler 测试了这个，通过停止下载 master.css，并让 styles.css 完全加载。然后，我让master.css 加载。 master.css 中的“重叠”样式仍然适用——并且渲染被阻止，直到 master.css 加载并被解析。注意：我在master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`上尝试了rel=preload。
感谢@LeeC，我知道在撰写本文时我的答案是正确的，但我会相信你的话，它现在已经修复并编辑我的答案。

【解决方案2】：

我相信在执行代码时，它是从上到下读取的，这意味着最后一个 CSS 链接将覆盖其上方任何样式表中的相似样式。

例如，如果您创建了两个样式表

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

在这两种方法中，您将主体背景颜色设置为两种不同的颜色 - style2.css 中的主体颜色将优先。

您可以通过在您希望优先考虑的类样式中使用!IMPORTANT 来避免样式优先级问题，或者可能重新安排您的<link> 顺序。

【讨论】：

【解决方案3】：

级联定义了声明的优先级。我可以推荐官方规范；这部分内容可读性很好。

https://www.w3.org/TR/css-cascade-3/#cascading

以下对排序有影响，按优先级降序排列。

起源和重要性的组合：
1. Transition 声明
2. 用户代理的声明标有!important
3. 用!important标记的用户声明
4. 标有!important的页面作者声明
  1. 具有style 属性的元素的定义
  2. 文档范围的定义
5. Animation 声明
6. 页面作者声明
  1. 具有style 属性的元素的定义
  2. 文档范围的定义
7. 用户声明
8. 用户代理的声明
如果两个声明具有相同的来源和重要性，则 specifity, 表示元素定义的清晰程度，将发挥作用，计算得分。
- 每个标识符 100 分 (#x34y)
- 每节课 10 分 (.level)
- 每种元素类型 1 分 (li)
- 每个伪元素 (:hover) 1 分，:not 除外
例如，选择器main li + .red.red:not(:active) p > * 的特异性为24。
出现顺序仅在两个定义具有相同的起源、重要性和特异性时才起作用。后面的定义先于文档中的早期定义（包括导入）。

【讨论】：

【解决方案4】：

根据您的问题，我怀疑您有重复的选择、适用于所有页面的主集，以及您希望覆盖每个单独页面的主值的更具体的集。如果是这样，那么您的订单是正确的。 Master 首先加载，后续文件中的规则将优先（如果它们相同或具有相同的权重）。在这个网站上有一个强烈推荐的所有规则描述http://vanseodesign.com/css/css-specificity-inheritance-cascaade/当我开始做前端开发时，这个页面解决了很多问题。

【讨论】：

【解决方案5】：

最后加载的 CSS 是 THE MASTER，它将覆盖所有具有相同 css 设置的 css

例子：

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

h1 标签的输出是 font-size: 30px;

【讨论】：

嗨。在我的情况下，第一个定义的 .css 最后加载。它们是按加载顺序应用还是按定义顺序应用？
谢谢，这正是我想要的解释。

【解决方案6】：

最好的方法是尽可能多地使用类。无论如何都要避免使用 ID 选择器 (#)。当您只使用单个类编写选择器时，CSS 继承更容易遵循。

更新：在本文中阅读有关 CSS 特异性的更多信息：https://css-tricks.com/specifics-on-css-specificity/

【讨论】：

这是一篇关于 CSS 特异性的好文章：css-tricks.com/specifics-on-css-specificity

【解决方案7】：

顺序确实很重要。将取多次出现的最后一个声明值。请查看我制定的同一个：http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

如果你交换.test{}的顺序，那么你可以看到HTML采用CSS中最后一个声明的值

【讨论】：

所以你应该最后添加最具体的 CSS。

【解决方案8】：

让我们尝试通过一个示例来简化级联规则。规则更具体到一般。

首先应用 ID 的规则（超过类和/或元素不分先后）
对元素应用类而不考虑顺序
如果没有 class 或 id，则应用通用的
为同一组/级别应用顺序中的最后一个样式（声明顺序基于文件加载顺序）。

这里是css和html代码；

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

这是css样式

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

这是结果。无论样式文件的顺序还是样式声明，id="important"都适用于最后（注意class="deadline"最后声明但不生效）。

<article> 元素包含 <aside> 元素，但是最后声明的样式将生效，在这种情况下 article h2 { .. } 在第三个 h2 元素上。

这是 IE11 上的结果：（没有足够的权限发布图片）DarkBlue：休斯顿纪事新闻，DarkGreen：您所在城市的最新发展，紫色：休斯顿地方广告部分，黑色：下一个部分

【讨论】：

【解决方案9】：

应用最具体的样式：

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

如果所有选择器具有相同的特异性，则使用最近的声明：

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

在您的情况下，body:not([input="button"]) 更具体，因此使用其样式。

【讨论】：

查看我对关于最后一个选择器的问题的评论。
当我们需要覆盖不可编辑的样式表时，特异性规则会让事情变得更加困难！

【解决方案10】：

这取决于加载顺序和应用于每种样式的实际规则的特殊性。鉴于您的问题的上下文，您希望首先加载您的一般重置，然后是特定页面。然后，如果您仍然没有看到预期的效果，您需要研究所涉及的选择器的特殊性，正如其他人已经指出的那样。

【讨论】：

【解决方案11】：

CSS 规则级联的规则很复杂——与其试图解释得很糟糕，我会简单地让您参考规范：

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

简而言之：更具体的规则优先于更一般的规则。特异性是根据涉及的 ID、类和元素名称的数量以及是否使用 !important 声明来定义的。当存在多个相同“特异性级别”的规则时，以最后出现的为准。

【讨论】：

那么样式表的加载顺序没有具体的规则吗？我了解 CSS 在特异性方面的显示方式，但我会假设我的主表会加载，除非被覆盖。
其实!important是直接参与级联的，与具体无关。特异性与选择器有关，而!important 与属性声明一起使用。（所以你说规则很复杂是对的！;）
那么样式表的加载方式是否与元素相同，如果它们具有相同的特性，则最后一个优先？
@iananananan：基本上，浏览器永远不会看到单独样式表的 CSS。如果有多个样式表，它们都被视为一个巨大的样式表，并相应地评估规则。
@user34660 BoltClock 的评论来自 CSS 样式的角度。您是正确的，样式表在 DOM 中保持独立，但这种分离不会影响这些样式如何应用于任何东西。