内部样式表不覆盖外部样式表？答案

【问题标题】：Internal Stylesheet NOT overriding External stylesheet?内部样式表不覆盖外部样式表？
【发布时间】：2013-09-09 17:20:29
【问题描述】：

我正在尝试向一些标签添加一些自定义样式，但发现很难覆盖外部 CSS 文件。添加样式内联似乎工作正常，但使用内部页面样式表行不通。标签仍在使用外部样式。

例如，这不起作用

<link rel="stylesheet" type="text/css" href="styles.css" />

<style type="text/css">

    h1 {
        font-size:36px;
    }

  </style>

我什至尝试创建自定义样式

<style type="text/css">

    h1.heading {
            font-size:36px;
        }

 </style>

而且没有任何变化。

This JSFiddle 演示了这个问题。

【问题讨论】：

【解决方案1】：

我至少看到一个问题。如果您有兴趣了解这是怎么回事：<h1><a href="#">xx</a></h1>

这是你的问题。在您的外部 CSS 中：

#header h1 a {
    display: block;
    width: 273px;
    height: 51px;
    background: url(images/cap-logo.png);
    text-indent: -9999px;
}

ID 的使用是h1 的最具体版本，其中a 内联子元素到#header 元素，所以这就是使用的内容。正如您可能知道的那样，这是将标题移到可见区域之外。

有几种方法可以将其重新显示在屏幕上。最简单的方法是将<h1> 更改为带有 id 的跨度：

<span id="big-x"><a href="#">xx</a></span>

然后用这个元素做你需要做的事情就相对简单了。

其他选项是更改 CSS 规则，或者至少在您的内联规则中指定。我在更新的小提琴中做到了这一点：http://jsfiddle.net/p2M7r/1/

#header h1 a {
    font-size:96px;
    text-indent: 0;
}

【讨论】：