在 HTML 页面中加载 CSS 文件的顺序是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3067455/
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
What is the order of loading the CSS files in a HTML page?
提问by User 1034
I want to know the order of loading the CSS files in a HTML page.
我想知道在 HTML 页面中加载 CSS 文件的顺序。
My actual requirement is like this: I have more than 10 CSS files in my application.
我的实际需求是这样的：我的应用程序中有 10 多个 CSS 文件。
I am importing some 3 to 4 CSS files in each HTML page. The problem is I have duplicate classes that defined in some CSS files. That means I override some of the CSS classes in the CSS files. In some pages it behaves correctly. In some pages it behaves wrongly. I have inline styles defined for some of the DIVs in HTML page also. I am keeping CSS class for that DIVs also.
我在每个 HTML 页面中导入了一些 3 到 4 个 CSS 文件。问题是我在某些 CSS 文件中定义了重复的类。这意味着我覆盖了 CSS 文件中的一些 CSS 类。在某些页面中，它的行为是正确的。在某些页面中，它的行为是错误的。我也为 HTML 页面中的某些 DIV 定义了内联样式。我也为那些 DIV 保留了 CSS 类。
Can anyone know which one will take higher priority or which one loads first ?
谁能知道哪个优先级更高或哪个先加载？
回答by meder omuraliev
Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.
通常，最后一条规则优先。话虽如此，但存在“例外”，即内联样式优先于外部样式表（内联 !important 比外部 !important 等更重要），并且更具体的选择器会覆盖通用选择器。
Read all about it @ http://www.w3.org/TR/CSS2/cascade.html
阅读所有相关信息@ http://www.w3.org/TR/CSS2/cascade.html
回答by animuson
CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.
CSS 文件按照它们在页面中出现的顺序加载。如果在 CSS 文件中重新定义了一个类，它将覆盖之前的类语句。
Sodiv.sample { background: none; width: 200px }
anddiv.sample { color: #FFF; width: 400px }
will becomediv.sample { background: none; color: #FFF; width: 400px }
所以div.sample { background: none; width: 200px }
和div.sample { color: #FFF; width: 400px }
将成为div.sample { background: none; color: #FFF; width: 400px }
You can also use the '!important' addin to make rules take precedence over other defined rules.
您还可以使用 '!important' 插件使规则优先于其他定义的规则。
Sodiv.sample { background: none; width: 200px !important }
anddiv.sample { color: #FFF; width: 400px }
will becomediv.sample { background: none; color: #FFF; width: 200px !important }
所以div.sample { background: none; width: 200px !important }
和div.sample { color: #FFF; width: 400px }
将成为div.sample { background: none; color: #FFF; width: 200px !important }
Note:Many people will advise againstusing the '!important' addin in your CSS files. Personally, I see nothing wrong with it.
注意：很多人会建议不要在 CSS 文件中使用 '!important' 插件。就我个人而言，我认为它没有任何问题。
回答by Babiker
Each element will be rendered based on the properties from the last style-sheet from which it has been selected. Properties which have been declared as !important;are an exception. Part of the problem is that you have 10 style-sheets.
每个元素将根据最后一个样式表中的属性进行渲染，从中选择它。已声明为!important;例外的属性。部分问题是您有 10 个样式表。
