一个 CSS 文件可以优先于另一个 CSS 文件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16913131/
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
Can one CSS file take priority over another CSS file?
提问by Owen
I'm in London working on an application, and the html/css guy is in New York. He's sending me updates daily by email as we have no source control set up that we can both use, I'm constantly making small changes to his css, so each time I get a new file from him, I have to reapply all my changes to it, and obviously the more work I do, the longer this takes each time.
我在伦敦处理一个应用程序，而 html/css 人员在纽约。他每天通过电子邮件向我发送更新，因为我们没有设置我们都可以使用的源代码控制，我不断对他的 css 进行小的更改，所以每次我从他那里得到一个新文件时，我都必须重新应用我的所有更改显然，我做的工作越多，每次花费的时间就越长。
I had the idea of making my own seperate stylesheet, but is there a way to tell the browser to give my sylesheet higher priority and overwrite any of his styles that have the same class name and attributes?
我有制作自己的单独样式表的想法，但是有没有办法告诉浏览器给我的样式表更高的优先级并覆盖他的任何具有相同类名和属性的样式？
This isn't going to be a public site so we're only going to be supporting the latest browsers.
这不会是一个公共站点，所以我们只会支持最新的浏览器。
回答by Kees Sonnema
It depends on how you set them in your header. So something like this will work:
这取决于您如何在标题中设置它们。所以这样的事情会起作用：
<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />
The last one will be picked up.
最后一个会被捡起来。
And an helpful link about stylesheets here: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2
还有一个关于样式表的有用链接：http: //www.w3.org/TR/html401/present/styles.html#h-14.3.2
See also: Precedence in CSSif the above doesn't work for you.
另请参阅：如果上述内容不适合您，请参阅CSS 中的优先级。
Hope it is clear.
希望它很清楚。
回答by webrama.pl
I personaly strictly discourage to use !important. Learn what's really important from here.
我个人严格不鼓励使用 !important。从这里了解什么是真正重要的。
You should know:
你应该知道：
.some-class .some-div a {
color:red;
}
Is always more important than (order of apperance have not matter in this case):
总是比（在这种情况下出现顺序无关紧要）更重要：
.some-class a {
color:blue;
}
If you have (two declarations with the same level):
如果您有（两个相同级别的声明）：
.some-class .some-div a {
color:red;
}
.some-class .some-div a {
color:blue;
}
Later declaration is used. The same is when it comes to files included in head tag as @Kees Sonnema wrote.
使用后面的声明。@Kees Sonnema 所写的 head 标签中包含的文件也是如此。
回答by David Jashi
CSS rules are applied sequentially. So, all you have to do is include your CSS last, after all others.
CSS 规则按顺序应用。所以，你所要做的就是最后包含你的 CSS，毕竟其他的。
回答by Varun
Css rules are sequential, you should do two things on your html files
CSS 规则是连续的，你应该对你的 html 文件做两件事
- Include your CSS as the last css
- Add !important on all css attributes in your css file
Eg: position : absolute !important;
- 包括您的 CSS 作为最后一个 css
- 在 css 文件中的所有 css 属性上添加 !important
Eg: position : absolute !important;
that should serve your purpose
这应该符合你的目的
回答by FoxyStyle
Somewhere I read that it is not about which CSS file is called before or after, but actually which loads first. For example, if your first CSS file is long enough to keep loading while the one under (which by basic theory should have higher priority) already loaded, these lines loaded after will have higher priority. It's tricky but we must be aware of it! Technique with specificity seems legit to me. So the more specific (#someid .someclass div rather than .someclass div) the higher priority.
我在某处读到这不是关于在之前或之后调用哪个 CSS 文件，而是实际上哪个首先加载。例如，如果您的第一个 CSS 文件足够长以继续加载，而下一个（根据基本理论应该具有更高的优先级）已经加载，则加载后的这些行将具有更高的优先级。这很棘手，但我们必须意识到这一点！具有特异性的技术对我来说似乎是合法的。所以越具体（#someid .someclass div 而不是 .someclass div）优先级越高。
回答by Elliot A.
It works like this:
它是这样工作的：
<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">
second-style.css:
第二个style.css：
@import 'third-style.css';
The last style imported is the one that all the rules stick. For example:
导入的最后一种样式是所有规则都遵循的样式。例如：
first-style.css:
第一个样式.css：
body{
size:200%;
color:red;
}
second-style.css:
第二个style.css：
@import 'third-style.css';
p{
color:red;
}
third-style.css:
第三样式.css：
p{
color:green;
size:10%
}
The resulting styles would be:
由此产生的样式将是：
body{
size:200%;
color:red;
}
p{
color:green;
size:10%
Note:if you add !important rules, it's different. For example:
注意：如果添加 !important 规则，则不同。例如：
first-style.css:
第一个样式.css：
body{
size:200% !important;
color:red !important;
}
second-style.css:
第二个style.css：
@import 'third-style.css';
p{
color:red;
}
third-style.css:
第三样式.css：
p{
color:green;
size:10%
}
The result would be:
结果将是：
body{
size:200% !important;
color:red !important;
}
I hope this helps!
我希望这有帮助！
回答by Elegant Coder
I found a post here in stackoverflow. I thought it may help you.
我在 stackoverflow 上找到了一个帖子。我认为它可以帮助你。
An efficient way to merge 2 large CSS files
If you are looking to actually merge your files then this will be useful, I guess.
如果您希望实际合并您的文件，那么这将很有用，我猜。
Specifying the CSS in a more specific way will also help you.
以更具体的方式指定 CSS 也会对您有所帮助。
like:
喜欢：
td.classname{}
table.classname{}
回答by Md Rashadul Islam
I use CSS priority rule as below:
我使用 CSS 优先级规则如下：
First rule as inline css with html which will marge any kinda css.
Second rule as the keyword use !important in css declaration after value.
Third rule as the html header stylesheet link priority order (Main css stylesheet after custom css stylesheet).
第一条规则是带有 html 的内联 css，它将对任何种类的 css 进行调整。
第二条规则作为关键字使用 !important 在值之后的 css 声明中。
第三条规则作为 html 标题样式表链接优先顺序（自定义 css 样式表之后的主 css 样式表）。
Basically user want to use the third rule also want to marge bootstrap css to custom css, example below:
基本上用户想使用第三条规则也想将 bootstrap css marge 到自定义 css，示例如下：
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">
