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

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

191994 次浏览
小开
最佳答案

CSS 规则级联的规则很复杂——与其试图糟糕地解释它们，不如参考一下规范:

Http://www.w3.org/tr/2011/rec-css2-20110607/cascade.html#cascade

简而言之: 更具体的规则会凌驾于更一般的规则之上。具体性是根据涉及的 ID、类和元素名的数量以及是否使用了 !important声明来定义的。当同一“特异性水平”存在多个规则时，最后出现的规则获胜。

小开

应用的最具体的风格是:

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

小开

它既取决于负载顺序，也取决于应用于每种样式的实际规则的特殊性。考虑到您的问题的上下文，您希望首先加载您的一般重置，然后页面特定。然后，如果你仍然没有看到预期的效果，你需要研究的特异性选择参与，因为其他人已经指出。

小开

秩序很重要。将获取多个匹配项的最后一个声明值。请看我做的同一个: http://jsfiddle.net/Wtk67/

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




<style>
.test{
color:blue;
}


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

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

小开

让我们用一个例子来简化级联规则。

  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的结果: (没有足够的权利发布图片)深蓝色: 休斯敦纪事报新闻，深绿色: 最新的发展在你的城市，紫色: 休斯顿本地广告部分，黑色: 下一部分

enter image description here

小开

最后加载的 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标签的输出将是字体大小: 30px;

小开

最好的方法是尽可能多地使用类。避免 ID 选择器(#)。当您只使用单个类编写选择器时，CSS 继承更容易实现。

更新: 在本文中阅读更多关于 CSS 特异性的内容: https://css-tricks.com/specifics-on-css-specificity/

小开

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

小开

编辑: 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相同特异性的规则都将被覆盖。

在部署之前，最好将所有规则放在一个工作表中(并进行缩小)。

小开

定义声明优先级的是 连锁反应。我可以推荐正式的规范; 它的这一部分非常易读。

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. 如果两个声明具有相同的起源和重要性，则 特性，强大表示元素定义的清晰程度，进行计算得分。

    • 每个标识符(#x34y)为100点
    • 每班10分(.level)
    • 每个元素类型(li)1点
    • 不包括 :not的每个伪元素(:hover)得1分

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

  3. 只有当两个定义具有相同的起源、重要性和特异性时，出场顺序才能发挥作用。后面的定义先于文档中的早期定义(包括导入)。

小开

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

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

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

在这两种情况下，都将 body 背景设置为两种不同的颜色，style2.css 中 body 的颜色优先。

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


提交答案