在同一个 html 页面中使用多个 css 样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4284499/
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
Use multiple css stylesheets in the same html page
提问by Lilz
How would I use multiple CSS stylesheets in the same HTML page where both stylesheets have a banner class, for instance. How do you specify which class you are referring to?
例如，我将如何在同一个 HTML 页面中使用多个 CSS 样式表，其中两个样式表都有一个横幅类。你如何指定你指的是哪个类？
回答by Quentin
Style sheets are, effectively, concatenated into a single style sheet in the order in which they appear in the HTML source.
样式表有效地按照它们在 HTML 源代码中出现的顺序连接成一个单独的样式表。
The normal rules for applying rulesetsthen apply (i.e. by specificitywith the last ruleset that defines a given property winning in the event of a tie and !importantthrowing a spanner into the works)
然后应用规则集的正常规则（即通过最后一个规则集的特殊性，该规则集定义了在平局的情况下获胜的给定财产和!important将扳手投入工作）
回答by Susan
Yes, you can include multiple style sheets, but you need to label them as alternate style sheets and give the user some way to activate them using JavaScript - perhaps by clicking a link.
是的，您可以包含多个样式表，但您需要将它们标记为备用样式表，并为用户提供一些使用 JavaScript 激活它们的方法 - 可能是通过单击链接。
To create an alternate style sheet:
要创建替代样式表：
<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />
Next create a method in your Javascript file that will: 1. Load all the style sheets in an array 2. Example:
接下来在您的 Javascript 文件中创建一个方法，它将： 1. 加载数组中的所有样式表 2. 示例：
function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i < links.length; i++)
{
link = links[i];
if(/stylesheet/.test(link.rel))
{
sheets.push(link);
}
}
return sheets;
}
Then go through the array using some type of if/else loop that disables the style sheets you don't want and enables the style sheet you want. (You can write a separate method or insert the loop into the method above. I like to use the onload command to load the CSS array with the page, then call the printView method.)
然后使用某种类型的 if/else 循环遍历数组，禁用您不想要的样式表并启用您想要的样式表。（可以单独写一个方法，也可以在上面的方法中插入循环。我喜欢用onload命令将CSS数组与页面一起加载，然后调用printView方法。）
function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i < sheets.length; i++)
{
sheet = sheets[i];
if(sheet.title == title1)
{
sheet.disabled = false;
}
else
{
sheet.disabled = true;
}
Lastly, create code in your HTML document that the user will activate the JavaScript method such as:
最后，在您的 HTML 文档中创建用户将激活 JavaScript 方法的代码，例如：
<a href="#" onClick ="methodName();">Link Name</a>
回答by Nick Craver
You can't control which you're referencing, given the same level of specificityin the rule (e.g. both are simply .banner) the stylesheet included last will win.
您无法控制要引用的对象，因为规则中具有相同级别的特定性（例如，两者都只是.banner），最后包含的样式表将获胜。
It's per-property, so if there's a combination going on (for example one has background, the other has color) then you'll get the combination...if a property is defined in both, whatever it is the last time it appears in stylesheet order wins.
这是每个属性，所以如果有一个组合（例如一个有background，另一个有color），那么你会得到组合......如果一个属性在两者中定义，无论它最后一次出现在样式表中是什么时候订单获胜。
回答by annakata
You can't and don't.
你不能也不要。
All CSS rules on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will "stick". Specificity is determined by the selector and by the order they appear in the document. All in all the point is that this is part of the cascading. You should refer to one of the very many CSS tutorials on the net.
页面上的所有 CSS 规则都将被应用（HTML“不知道”这个过程），并且具有最高特异性的单个规则将“坚持”。特异性由选择器和它们在文档中出现的顺序决定。总而言之，这是级联的一部分。您应该参考网上众多的 CSS 教程之一。
回答by Pekka
You never refer to a specific style sheet. All CSS rules in a document are internally fused into one.
您永远不会引用特定的样式表。文档中的所有 CSS 规则在内部融合为一个。
In the case of rules in both style sheets that apply to the same element with the same specificity, the style sheet embedded later will override the earlier one.
如果两个样式表中的规则都适用于具有相同特性的相同元素，则后面嵌入的样式表将覆盖前面的样式表。
You can use an element inspector like Firebugto see which rules apply, and which ones are overridden by others.
您可以使用像Firebug这样的元素检查器来查看哪些规则适用，哪些规则被其他规则覆盖。
回答by Mikael Eliasson
The one you include last will be the one that is used. Note however that if any rules has !important in the first stylesheet they will take priority.
您最后包含的那个将是被使用的那个。但是请注意，如果任何规则在第一个样式表中具有 !important ，它们将优先。
回答by David Oliver
Think of it as your stylesheet(s) referring to ("selecting") elements in your HTML page, not the other way around.
将其视为您的样式表引用（“选择”）HTML 页面中的元素，而不是相反。
回答by Nastynas69
You can't. The last stylesheet you specify will be the one html page will use. Think of it as a big single .css document.
你不能。您指定的最后一个样式表将是将使用的一个 html 页面。将其视为一个大的单个 .css 文档。
