代码之家  ›  专栏  ›  技术社区  ›  nikc.org

第二个链接样式表无效

  •  2
  • nikc.org  · 技术社区  · 16 年前

    我在将第二个样式表链接到HTML文档时遇到问题,找不到(希望是非常明显的)问题。

    我在头部链接样式表,因此:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" href="assets/css/global.css" type="text/css" media="all" title="Global styles" charset="utf-8">
    <link rel="stylesheet" href="assets/css/ie.css" type="text/css" media="all" title="IE Overrides" charset="utf-8">
    

    问题是,秒样式表没有任何效果。颠倒他们的顺序也证明了这一点。

    为了测试,我在第二个样式表中加入了一个规则,使正文背景变红,甚至尝试添加 !important 但无济于事。

    /* Global CSS */
    body {
        background-color: #fff;
    }
    
    /* IE CSS */
    body {
        background-color: #f00 !important;
    }
    

    Firebug网络面板显示了两个样式表都可以加载,样式面板显示了这两个样式表中的样式,但是后者中的规则不做蹲式处理。

    这让我感到困惑,因为它是非常非常基本的东西,我以前已经成功地做了数百次。

    2 回复  |  直到 8 年前
        1
  •  6
  •   Pekka    16 年前

    尝试删除 title 属性来自 link 标签。 标题 与样式表链接一起使用时具有特殊意义,更多信息请参见:

    Alternative Style: Working With Alternate Style Sheets

        2
  •  0
  •   FKEinternet    8 年前

    在我的例子中,我将工作的CSS规则集从页面源中的一个PHP字符串移动到了一个外部CSS文件:

    来自:

        $headCss.=
        '   <style type="text/css">
                #containBrainForHire
                {   background:url(\'/graphics/BrainForHire.png\');
                    display:table;
                    height:300px;
                    margin:0 auto;
                    width:525px;
                }
            </style>
        ';
    

    收件人:

        #containBrainForHire
        {   background:url(\'/graphics/BrainForHire.png\');
            display:table;
            height:300px;
            margin:0 auto;
            width:525px;
        }
    

    没有什么 在新的CSS文件中工作,直到我修复了 background 定义:用于转义php字符串中的单引号的反斜杠在css文件中无效。

    更正的CSS文件内容:

        #containBrainForHire
        {   background:url('/graphics/BrainForHire.png');
            display:table;
            height:300px;
            margin:0 auto;
            width:525px;
        }
    

    错误控制台中没有报告错误 ,只是新的CSS文件中的任何内容都不会对页面的显示产生任何影响。(对于有用的调试工具来说……)

    我希望这能节省别人认识到这个问题所花的时间。