内部样式表不会覆盖外部样式表？

Question

我正在尝试为一些标签添加一些自定义样式，但发现很难覆盖外部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证明了这个问题。

Answer 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;
}