如何防止我的样式被周围 div 上的另一种样式覆盖? [英] How do I prevent my style from being overridden another style on a surrounding div?

问题描述

这看起来很简单，但问题来了.

样式表如下:

#Content h1、#Content h2、#Content h3、#Content h4、#Content h5、#Content h6 {颜色:#405679；}h3#issueHeader {颜色:蓝色；}

HTML 像这样:

<h3 id="issueHeader">在本期中:</h3>

我的 issueHeader 选择器没有像我期望的那样覆盖 Content 选择器，Firebug 和我的眼球告诉我颜色是从 div 继承的，并且 issueHeader 选择器被覆盖了.嗯?

解决方案

css 赋予元素更多权重 特定 选择器.因此，如果您希望 #Content h3 不覆盖 h3#issueHeader，请给它另一个选择器:例如#Content h3#issueHeader

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

It seems elementary, but here is problem.

Stylesheet like so:

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

h3#issueHeader {
  color: blue;
}

HTML like so:

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

Instead of my issueHeader selector overriding the Content selector like I would expect, Firebug and my eyeballs show me that the color is inherited from the div, and the issueHeader selector is overridden. Hunh?

解决方案

css gives more weight to elements with more specific selectors. So if you want #Content h3 not to override h3#issueHeader, give it another selector: e.g. #Content h3#issueHeader

If your h1...hx elements are meant to be generally #405679, set them to that without the #Content selector. Then override them with a more specific selector when you need to.

这篇关于如何防止我的样式被周围 div 上的另一种样式覆盖?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！