在同一个html页面中使用多个css样式表

例如,如何在同一个HTML页面中使用多个CSS样式表,其中两个样式表都具有横幅类.你如何指定你指的是哪个班？

1> Quentin..：

---

样式表有效地按照它们在HTML源中出现的顺序连接到单个样式表中.

然后应用规则集的常规规则(即通过特定的最后一个规则集定义一个给定的属性在一个平局的情况下获胜并且!重要的是将扳手投入到工作中)

2> 小智..：

---

是的,您可以包含多个样式表,但是您需要将它们标记为备用样式表,并为用户提供一些使用JavaScript激活它们的方法 - 可能通过单击链接.

要创建备用样式表:

接下来在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方法的代码,例如:

 Link Name

---

关于问题和答案的一些值得注意的事情.**这个答案是正确的,但只有你想要多种不同的风格**.您可以使用与主要工作单相同的方式定义多个工作表.只要他们不改变相同的属性 - 你就没事了.如果2个样式表相互矛盾,那么你应该得到最后处理的样式(Quentin写了一个简明的答案).

3> Nick Craver..：

---

在规则中具有相同级别的特异性(例如,两者都是简单的.banner),您无法控制您引用的内容,最后包含的样式表将获胜.

它是per-property,所​​以如果有一个组合正在进行(例如一个有background,另一个有color)那么你将获得组合......如果在两者中都定义了一个属性,无论它最后一次出现在样式表中订单获胜.