在同一个html页面中使用多个css样式表
例如，如何在同一个HTML页面中使用多个CSS样式表，其中两个样式表都有一个banner类。你如何指定你所引用的类？
回答 8
Stack Overflow用户
发布于 2010-11-26 18:38:34
样式表实际上是按照它们在HTML源中出现的顺序连接到单个样式表中的。
然后应用normal rules for applying rulesets (即，使用定义了给定属性的最后一个规则集的specificity，在平局和!important将扳手投入工作的情况下获胜)
Stack Overflow用户
发布于 2013-09-12 02:36:21
是的，您可以包含多个样式表，但您需要将它们标记为备用样式表，并为用户提供一些使用JavaScript激活它们的方法--可能是通过单击一个链接。
要创建备用样式表，请执行以下操作：
<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />接下来，在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;
}然后使用某种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;
}最后，在HTML文档中创建用户将激活JavaScript方法的代码，如下所示：
<a href="#" onClick ="methodName();">Link Name</a>Stack Overflow用户
发布于 2010-11-26 18:38:27
你不能控制你引用的是哪一个，因为规则中的specificity级别相同(例如，两者都是简单的.banner)，最后包含的样式表将获胜。
它是针对每个属性的，所以如果有一个组合正在进行(例如，一个具有background，另一个具有color)，那么您将获得在这两个属性中定义的combination...if，无论它最后一次出现在样式表中的顺序是什么。
https://stackoverflow.com/questions/4284499
复制相似问题
腾讯云开发者
