首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在同一个html页面中使用多个css样式表

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

Stack Overflow用户
提问于 2010-11-26 18:35:41
回答 8查看 131.3K关注 0票数 28

例如,如何在同一个HTML页面中使用多个CSS样式表,其中两个样式表都有一个banner类。你如何指定你所引用的类?

EN

回答 8

Stack Overflow用户

发布于 2010-11-26 18:38:34

样式表实际上是按照它们在HTML源中出现的顺序连接到单个样式表中的。

然后应用normal rules for applying rulesets (即,使用定义了给定属性的最后一个规则集的specificity,在平局和!important将扳手投入工作的情况下获胜)

票数 24
EN

Stack Overflow用户

发布于 2013-09-12 02:36:21

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

要创建备用样式表,请执行以下操作:

代码语言:javascript
复制
<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />

接下来,在Javascript文件中创建一个方法,该方法将: 1.加载数组中的所有样式表。2.示例:

代码语言:javascript
复制
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方法。)

代码语言:javascript
复制
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方法的代码,如下所示:

代码语言:javascript
复制
 <a href="#" onClick ="methodName();">Link Name</a>
票数 18
EN

Stack Overflow用户

发布于 2010-11-26 18:38:27

你不能控制你引用的是哪一个,因为规则中的specificity级别相同(例如,两者都是简单的.banner),最后包含的样式表将获胜。

它是针对每个属性的,所以如果有一个组合正在进行(例如,一个具有background,另一个具有color),那么您将获得在这两个属性中定义的combination...if,无论它最后一次出现在样式表中的顺序是什么。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4284499

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档