1

我正在尝试向一些标签添加一些自定义样式，但发现很难覆盖外部 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>

而且没有任何变化。

这个 JSFiddle演示了这个问题。

4

1 回答 1

2

我至少看到一个问题。如果您有兴趣了解这件事发生了什么：<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;
}

h1ID 的使用是元素内联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;
}
于 2013-09-09T22:28:44.153 回答