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

157

在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函数中的相同？意思是显示的最后一行是？

css  overriding  stylesheet 
— ian5v
source
我刚刚意识到这将更适合网站管理员。有更好的发布位置吗？
— ian5v 2012年
10
就在这里很好。
— 搅拌器
4
body:not(input="button")并不是有效的选择器。您可能打算将其拆分为body, input:not([type="button"])。
— BoltClock
那很有意思。我不相信我以前见过这样的语法。我仍然很新，但是那些双括号对我来说是陌生的。
— ian5v 2012年
这些括号用于属性选择器：developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors @topic：可能您想切换样式表的顺序：您master.css应该首先加载样式表，然后更容易否决您的中的主样式styles.css。
— 烤

Answers:

163

CSS规则级联的规则很复杂-与其尝试严重地解释它们，不如简单地向您介绍该规范：

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

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

— 暮色-无效-
source
1
那么对于样式表的加载顺序没有特定的规定？我了解CSS如何显示特定性，但是我假设除非覆盖，否则我的主表将加载。
— ian5v 2012年
11
实际上，!important直接参与级联，与特异性无关。特异性与选择器有关，而!important与属性声明一起使用。（因此，您说的是规则很复杂！！）
— BoltClock
2
那么样式表是否以与元素相同的方式加载，如果它们具有相同的特性，则以最后一个优先？
— ian5v 2012年
3
@iananananan：基本上，浏览器从看不到单个样式表的CSS。如果存在多个样式表，则将它们全部视为一个巨型样式表，并相应地评估规则。
— BoltClock
2
@ user34660 BoltClock的评论是从CSS样式的角度出发的。您是对的，样式表在DOM中保持分离是正确的，但是这种分离不会影响这些样式如何应用于任何内容。
— duskwuff -inactive
31

应用最具体的样式：

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"])更具体，因此使用其样式。

— 搅拌机
source
1
请参阅我对有关最后一个选择器的问题的评论。
— BoltClock
1
当我们需要覆盖无法编辑的样式表时，特定性规则会使事情变得更加困难！
— 阿里
23

顺序很重要。将采用多次出现的最后声明的值。请查看我得出的相同结果：http : //jsfiddle.net/Wtk67/

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


<style>
    .test{
        color:blue;
    }

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

如果交换的顺序.test{}，则可以看到HTML接受CSS中声明的最后一个的值

— 罗伊·梅杰（Roy MJ）
source
3
因此，您应该最后添加最具体的CSS。
— 现场直播
17

最后加载的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；

— 杜德尔
source
1
你好 在我的情况下，第一个定义.css被最后加载。是按加载顺序还是按定义顺序应用它们？
— Eugen Konkov
谢谢，这正是我想要的解释。
— HunterTheGatherer
7

让我们用一个示例来简化级联规则。规则更针对一般。

  1. 应用ID的第一个规则（类和/或元素不分顺序）
  2. 将类应用于元素，而不考虑顺序
  3. 如果没有类或ID，则应用通用类或ID
  4. 对同一组/级别应用顺序中的最后一种样式（基于文件加载顺序的声明顺序）。

这是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上的结果：（没有足够的版权发布图像）深蓝色：休斯顿纪事报，深绿色：您所在城市的最新动态，紫色：休斯敦本地广告栏，黑色：下一节

在此处输入图片说明

— 卡根·阿贡
source
6

它取决于加载顺序和应用于每种样式的实际规则的特殊性。给定问题的上下文，您想先加载常规重置，然后加载特定页面。然后，如果您仍然看不到预期的效果，则需要像其他人已经指出的那样，研究所涉及选择器的特殊性。

— 普罗迪森
source
2

编辑：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将被覆盖。

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

— 缺口
source
考虑从页面的<head>部分加载的替代的几乎相同的样式表的情况，其中包含条件媒体属性以加载特定于智能手机和平板电脑的样式表。在这种情况下，如果加载顺序不确定，则在媒体中指定的逻辑对于每个样式表必须严格排他。
— 林赛·海斯利
@n_i_c_k您的答案不正确。声明的顺序很重要，而不是加载顺序。我只是通过Fiddler进行了此测试，方法是停止下载master.css，并styles.css完全加载。然后，让我master.css加载。master.css仍然使用“重叠”样式-渲染被阻塞，直到被master.css加载并被解析。 注意：我尝试rel=preload了master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`。
— LEEC
谢谢@LeeC，我知道在撰写我的答案时是正确的，但是我会信服你的，因为它已经被修复并编辑我的答案。
— n_i_c_k
0

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

— 用户名
source
0

是级联定义了声明的优先级。我可以推荐官方规格；它的这一部分易于阅读。

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

以下对优先级从高到低的排序有影响。

  1. 的组合出身，和重要性：

    1. Transition 声明书
    2. 用户代理的声明标有 !important
    3. 用户声明标有 !important
    4. 页面作者的声明标有 !important
      1. 具有style属性的元素上的定义
      2. 全文档定义
    5. Animation 声明书
    6. 页面作者的声明
      1. 具有style属性的元素上的定义
      2. 全文档定义
    7. 用户声明
    8. 用户代理的声明

  2. 如果两个声明的来源和重要性相同，则特异性（即元素定义的清晰度）开始起作用，计算得分。

    • 每个标识符100点（#x34y）
    • 每节课10分（.level）
    • 每种元素类型（li）得1分
    • 每个伪元素（:hover），不包括1点:not

    例如，选择器main li + .red.red:not(:active) p > *的特异性为24。

  3. 在出现的顺序只有两个定义具有相同的起源，重要性和特殊性起到了重要作用。较晚的定义在文档中较早的定义之前（包括导入）。

— 迈克尔·施密德
source
0

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

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

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

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

您可以通过!IMPORTANT在想要优先使用的类样式内部使用或避免重新排列<link>顺序来避免样式优先级问题。

— 恩南·霍克（Ennam Hoque）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.