css - 内部样式表不覆盖外部样式表？

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将 child 内联到 #header元素，所以这是被使用的。您可能会说，这是将页眉移到可见区域之外。

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

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

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

其他选项是更改 CSS 规则，或者至少在您的内联规则中是特定的。我在更新的 fiddle 中做到了:http://jsfiddle.net/p2M7r/1/

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