Html 如何使 CSS 文件比另一个 CSS 文件更重要？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13029470/
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
How to make CSS file more important than another CSS file?
提问by alnassre
I want all the Classes,Tags and Ids within css.cssoverwritten over bootstrap.min.csswithout repeatingthe Classes,tags and Ids of bootstrap.min.css.
我希望所有中的类，标签和标识css.css覆盖在bootstrap.min.css不重复的类别，标签和标识bootstrap.min.css。
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
采纳答案by Jukka K. Korpela
There is no such magic. CSS has its own principles, such as the cascade, and you cannot switch them off.
没有这样的魔法。CSS 有自己的原则，比如级联，你不能把它们关掉。
You can place the reference to css.cssafter the reference to bootstrap.min.css, but this is just one factor in the process of resolving how CSS rules will be applied. Adding !important, which is generally a symptom of wrong design, is just yet another factor: an !importantrule in an earlier file may override your !importantrule, if its selector has higher specificity.
您可以在对 的引用css.css之后放置对的引用bootstrap.min.css，但这只是解决如何应用 CSS 规则的过程中的一个因素。添加!important，这通常是错误设计的症状，只是另一个因素：!important早期文件中的!important规则可能会覆盖您的规则，如果其选择器具有更高的特异性。
To override CSS rules, you need to analyze the rule you wish to override and set up a rule that “wins”, by the cascade principles.
要覆盖 CSS 规则，您需要分析要覆盖的规则，并通过级联原则设置“获胜”规则。
回答by Rob Forrest
Simple, include the more important CSS file last.
很简单，最后包含更重要的 CSS 文件。
回答by tobspr
When you include a stylesheet, it overwrites all declarations of the beforeincluded stylesheets. If you change your includes to:
当您包含样式表时，它会覆盖之前包含的样式表的所有声明。如果您将包含更改为：
<link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
Bootstrap is later included and will overwrite propertys from css.css.
Bootstrap 稍后包含在内，并将覆盖 css.css 中的属性。
Hope that helps.
希望有帮助。
回答by AdityaSaxena
I can only give you an example.
我只能给你举个例子。
Lets say Bootstrap.css has the following
.rules #world {border:0px;}[specificity 110]
假设 Bootstrap.css 具有以下
.rules #world {border:0px;}[特异性 110]
and css.css has the following
div #world{border:20px;}[specificity 101]
和 css.css 具有以下
div #world{border:20px;}[特异性 101]
In this case, bootstrap.css will always override css.css. So, I advise you to add a container to all of your content - give this container a id..lets say "god" and then add the prefix .god to all of your styles in css - but again, this is not as simple, and depends a lot on how you get your calculations right.
在这种情况下，bootstrap.css 将始终覆盖 css.css。所以，我建议你为你的所有内容添加一个容器——给这个容器一个 id..让我们说“god”，然后在 css 中的所有样式中添加前缀 .god——但同样，这不是那么简单，并且很大程度上取决于您如何正确计算。
#god div #world{border:20px;}
This is a length topic as someone else pointed out - so you'll have to basically know what all bootstrap is doing to your page and what is css.css doing.
正如其他人指出的那样，这是一个很长的话题 - 所以你必须基本上知道所有引导程序对你的页面做了什么以及 css.css 在做什么。
You can always look up this wonderful article which never gets old http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
你可以随时查看这篇永远不会过时的精彩文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
回答by Chandrakant
I think you could do one thing is that include only css.css and @import "css/bootstrap.min.css" within css.css so your code will be like this
我认为你可以做一件事是在 css.css 中只包含 css.css 和 @import "css/bootstrap.min.css" 所以你的代码会是这样的
Within html
在 html 内
<link href="css/css.css" rel="stylesheet">
and Within css.css
并在 css.css 中
@import "css/bootstrap.min.css"
.bootstrap_class{//your style..}
.hero-unit{background: red;}
Using this trick you can override bootstrap styling without any Showing results for headache this
使用此技巧，您可以覆盖引导程序样式，而无需任何显示结果令人头疼
回答by Murali Murugesan
Refer it last item in a list which will always override previous style sheets
将它引用到列表中的最后一项，该列表将始终覆盖以前的样式表
Below will force your page to fit 980px since it overrides the previous stylesheet property
下面将强制您的页面适合 980px，因为它覆盖了之前的样式表属性
Example
例子
Style1.css
样式1.css
#main{ width:1000px;}
Style2.css
样式2.css
#main{ width:980px;}
or
#main{ width:980px !important;} /* if needed only */
HTML
HTML
<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />
<div id="main"></div>
回答by Toping
if you cant alter the files, and the order of the call of the css file is not working, you can always use !important, but that is gonna comsume a lot of time becuz you need to add it on every line of css.
如果您无法更改文件，并且 css 文件的调用顺序不起作用，您可以随时使用 !important，但这会消耗大量时间，因为您需要在 css 的每一行添加它。
ex: display: inline !important;
例如：显示：内联！重要；
