CSS 样式表覆盖的顺序是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9459062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In which order do CSS stylesheets override?
提问by ian5v
In an HTML header, I've got this:
在 HTML 标题中，我有这个：
<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
styles.cssis my page-specific sheet. master.cssis a sheet I use on each of my projects to override browser defaults. Which of these stylesheets takes priority?
Example: first sheet contains specific
styles.css是我的页面特定工作表。master.css是我在我的每个项目中用来覆盖浏览器默认值的工作表。这些样式表中的哪个优先？示例：第一张纸包含特定
body { margin:10px; }
And associated borders, but the second contains my resets of
和相关的边框，但第二个包含我的重置
html, body:not(input="button") {
margin: 0px;
padding: 0px;
border: 0px;
}
In essence, does the cascading element of CSS work the same in terms of stylesheet references as it does in typical CSS functions? Meaning that the last line is the one displayed?
本质上，CSS 的级联元素在样式表引用方面的工作方式与在典型 CSS 函数中的工作方式相同吗？意思是最后一行是显示的那一行？
回答by duskwuff -inactive-
The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:
CSS 规则级联的规则很复杂——与其试图糟糕地解释它们，我只是简单地将您推荐给规范：
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !importantdeclaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.
简而言之：更具体的规则覆盖更一般的规则。特异性是根据涉及多少 ID、类和元素名称以及是否使用!important声明来定义的。当存在多个相同“特异性级别”的规则时，以最后出现的规则为准。
回答by Blender
The most specific style is applied:
应用最具体的样式：
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
If all of the selectors have the same specificity, then the most recent decleration is used:
如果所有选择器都具有相同的特性，则使用最近的声明：
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
In your case, body:not([input="button"])is more specific so its styles are used.
在您的情况下，body:not([input="button"])更具体，因此使用其样式。
回答by Roy M J
Order does matter. The last declared value of multiple occurrence will be taken. Please see the same one I worked out: http://jsfiddle.net/Wtk67/
顺序很重要。将采用多次出现的最后一个声明值。请参阅我制定的同一个：http: //jsfiddle.net/Wtk67/
<div class="test">Hello World!!</div>
<style>
.test{
color:blue;
}
.test{
color:red;
}
</style>
If you interchange the order of .test{}, then you can see the HTML takes value of the last one declared in CSS
如果交换 的顺序.test{}，则可以看到 HTML 采用 CSS 中声明的最后一个值
回答by Doodl
The last loading CSS is THE MASTER, which will override all css with same css settings
最后加载的 CSS 是 THE MASTER，它将覆盖所有具有相同 css 设置的 css
Example:
例子：
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
reset.css
重置.css
h1 {
font-size: 20px;
}
master.css
主文件
h1 {
font-size: 30px;
}
The output for the h1 tag will be font-size: 30px;
h1 标签的输出将为 font-size: 30px;
回答by Kagan Agun
Lets try to simplify the cascading rule with an example. The rules goes more specific to general.
让我们试着用一个例子来简化级联规则。规则更具体到一般。
- Applies rule of the ID's one first (over class and/or elements regardless of the order)
- Applies classes over elements regardless of order
- If no class or id, applies the generic ones
- Applies the last style in the order (declaration order based on file load order) for the same group/level.
- 应用 ID 的第一个规则（无论顺序如何，都适用于类和/或元素）
- 无论顺序如何，在元素上应用类
- 如果没有 class 或 id，则应用通用的
- 为同一组/级别应用顺序中的最后一个样式（基于文件加载顺序的声明顺序）。
Here is the css and html code;
这是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>
Here is the css 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>
Here is the result. No matter the order of style files or the style declaration, id="important"applies at the end (note the class="deadline"declared last but does not take any effect).
这是结果。无论样式文件的顺序还是样式声明，都id="important"放在最后（注意class="deadline"最后声明但不生效）。
The <article>element contains <aside>element, however last declared style will take effect, in this case article h2 { .. }on third h2 element.
该<article>元素包含<aside>元素，但最后声明的样式将生效，在这种情况下，article h2 { .. }在第三个 h2 元素上。
Here is the result on IE11: (Not enough rights to post image)DarkBlue: Houston Chronicle News, DarkGreen: Latest Developments in your city, Purple: Houston Local Advertisement Section, Black: Next section
这是 IE11 上的结果：（没有足够的权限发布图片）DarkBlue：休斯顿纪事新闻，DarkGreen：您所在城市的最新动态，紫色：休斯顿本地广告部分，黑色：下一部分
回答by prodigitalson
It depends on both load order and the specificity of the actual rules applied to each style. Given the context of your question you want to load your general reset first, then the page specific. Then if youre still not seeing the intended effect you need to look into the specificity of the selectors involved as others have already pointed out.
这取决于加载顺序和应用于每种样式的实际规则的特殊性。鉴于您的问题的上下文，您要先加载一般重置，然后是特定页面。然后，如果您仍然没有看到预期的效果，您需要研究所涉及的选择器的特殊性，正如其他人已经指出的那样。
回答by n_i_c_k
EDIT: Apr 2020, according to @LeeC's comment, this is not longer the case
编辑：2020 年 4 月，根据@LeeC 的评论，情况不再如此
Yes, it works the same as if they were in one sheet, however:
是的，它的工作原理与它们在一张纸上一样，但是：
Load Order Matters!
加载订单很重要！
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
In the above code, there is no guarantee that master.csswill load after styles.css. Therefore, if master.cssis loaded quickly, and styles.csstakes a while, styles.csswill become the second stylesheet, and any rules of the same specificity from master.csswill be overwritten.
在上面的代码中，不能保证master.css在styles.css. 因此，如果master.css加载很快，并且styles.css需要一段时间，styles.css将成为第二个样式表，并且任何具有相同特性的规则都master.css将被覆盖。
Best to put all your rules into one sheet (and minify) before deploying.
最好在部署之前将所有规则放在一张纸中（并缩小）。
回答by Jeroen Ooms
The best way is to use classes as much as possible. Avoid ID selectors (#) anyway. When you write selectors with just single classes, the CSS inheritance is way more easy follow.
最好的方法是尽可能多地使用类。无论如何都要避免使用 ID 选择器 (#)。当您仅使用单个类编写选择器时，CSS 继承会更容易遵循。
Update: Read more about CSS specificity in this article: https://css-tricks.com/specifics-on-css-specificity/
更新：在本文中阅读有关 CSS 特异性的更多信息：https: //css-tricks.com/specifics-on-css-specificity/
回答by user3094826
I suspect from your question that you have duplicate selections, a master set, that goes for all pages, and a more specific set that you wish to override the master values for each individual page. If that is the case, then your order is correct. The Master is loaded first and the rules in subsequent file will take precedence (if they are identical or have the same weight). There is a highly recommended description of all rules at this website http://vanseodesign.com/css/css-specificity-inheritance-cascaade/When I started with front end development, this page cleared up so many questions.
我从你的问题中怀疑你有重复的选择，一个主集，适用于所有页面，以及一个更具体的集，你希望覆盖每个单独页面的主值。如果是这种情况，那么您的订单是正确的。首先加载 Master，随后文件中的规则将优先（如果它们相同或具有相同的权重）。在这个网站http://vanseodesign.com/css/css-specificity-inheritance-cascaade/有一个强烈推荐的所有规则的描述，当我开始前端开发时，这个页面解决了很多问题。
回答by Michael Schmid
It is the cascadethat defines the precedence of declarations. I can recommend the official specification; this part of it is well-readable.
这是级联定义声明的优先级。我可以推荐官方规范；这部分是很好读的。
https://www.w3.org/TR/css-cascade-3/#cascading
https://www.w3.org/TR/css-cascade-3/#cascading
The following have an effect on the sorting, in descending order of priority.
以下对排序有影响，按优先级降序排列。
A combination of origin,and importance:
Transitiondeclarations- User agent's declarations marked with
!important - User's declarations marked with
!important - Page author's declarations marked with
!important- Definitions on the element with
styleattribute - Document-wide definitions
- Definitions on the element with
Animationdeclarations- Page author's declarations
- Definitions on the element with
styleattribute - Document-wide definitions
- Definitions on the element with
- User's declarations
- User agent's declarations
If two declarations have the same origin and importance, the specifity,meaning how clearly the element is defined, comes into play, calculating a scoring.
- 100 points for every identifier (
#x34y) - 10 points for every class (
.level) - 1 point for every element type (
li) - 1 point for every pseudo-element (
:hover) excluding:not
For example, the selector
main li + .red.red:not(:active) p > *has a specifity of 24.- 100 points for every identifier (
The order of appearanceonly plays a role if two definitions have the same origin, importance and specificity. Later definitions precede earlier definitions in the document (including imports).
的组合出身，和重要性：
Transition声明- 用户代理的声明标有
!important - 用户声明标有
!important - 页面作者声明标有
!important- 具有
style属性的元素的定义 - 文档范围的定义
- 具有
Animation声明- 页面作者声明
- 具有
style属性的元素的定义 - 文档范围的定义
- 具有
- 用户声明
- 用户代理的声明
如果两个声明具有相同的来源和重要性，则特殊性（即元素定义的清晰程度）就会发挥作用，计算得分。
- 每个标识符 100 分 (
#x34y) - 每节课10分（
.level） - 每个元素类型 1 分 (
li) - 每个伪元素 (
:hover) 1 分，不包括:not
例如，选择器
main li + .red.red:not(:active) p > *的规格为 24。- 每个标识符 100 分 (
只有当两个定义具有相同的起源、重要性和特异性时，出现的顺序才起作用。文档中较晚的定义先于较早的定义（包括导入）。
