如何防止我的风格被覆盖在周围div上的另一种风格？

Question

这似乎是基本的,但这是问题.

样式表如下:

#Content h1, #Content h2, #Content h3, #Content h4, #Content h5, #Content h6 {
  color: #405679;
}

h3#issueHeader {
  color: blue;
}

像这样的HTML:

<div id="Content">
  <h3 id="issueHeader">In This Issue:</h3>
</div>

而不是像我期望的那样覆盖内容选择器的我的issueHeader选择器,Firebug和我的眼球向我显示颜色是从div继承的,并且覆盖了issueHeader选择器.Hunh？

Answer 1

您可以抛出该!important属性h3#issueHeader以强制浏览器使用该样式

h3#issueHeader {
  color: blue !important;
}

但是,它仅在IE6中得到部分支持

此外,这应仅用作其他解决方案的最后手段.这是因为如果您网站的用户想要覆盖您的风格,重要的是成为一个有用的工具.看到这篇文章:不要使用"!important"

Answer 2

css为具有更多特定选择器的元素赋予更多权重.因此,如果您不想#Content h3覆盖h3#issueHeader,请给它另一个选择器:例如#Content h3#issuesHeader

如果您的h1 ... hx元素通常是#405679,请将它们设置为没有#Content选择器的元素.然后在需要时使用更具体的选择器覆盖它们.