内部样式表不覆盖外部样式表? [英] Internal Stylesheet NOT overriding External stylesheet?

问题描述

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

I'm trying to add some custom styles to a few tags but finding it difficult to override the external CSS file. Adding styles inline seems to work fine, but using an internal page stylesheet is not working out. Tags are still using external styles.

例如，这不起作用

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

<style type="text/css">

    h1 {
        font-size:36px;
    }

  </style>

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

I even tried creating a custom style

<style type="text/css">

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

 </style>

没有变化.

此JSFiddle 演示了此问题.

推荐答案

我看到至少一个问题.如果您有兴趣了解发生了什么事情:<h1><a href="#">xx</a></h1>

I see at least one issue. If you're interested in finding out what happened to this: <h1><a href="#">xx</a></h1>

这是您的问题.在您的外部CSS中:

Here's your problem. In your external CSS:

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

ID的使用是h1的最特定版本，其中a内联子元素是#header元素，因此被使用.如您所知，这是将标题移动到可见区域之外.

The use of the ID is the most specific version of h1 with an a inline child to a #header element, so this is what gets used. As you can probably tell, this is moving the header outside the visible area.

有两种方法可以将其重新显示在屏幕上.最简单的方法是将<h1>更改为具有ID的范围:

There's a couple ways to bring this back on the screen. The easiest way is to change the <h1> to a span with an id:

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

然后使用此元素来完成所需的操作相对来说很简单.

And then it's relatively trival to do what you need with this element.

其他选项是更改CSS规则，或者至少是内联规则中的特定规则.我在更新的小提琴中进行了此操作: http://jsfiddle.net/p2M7r/1/

Other options are to change the CSS rule, or be at least that specific in your inline rule. I did that in an updated fiddle: http://jsfiddle.net/p2M7r/1/

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

这篇关于内部样式表不覆盖外部样式表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！