如何防止我的风格被覆盖在周围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

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

h3#issueHeader {
  color: blue !important;
}

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

<小时/> 此外，这应仅用作其他解决方案的最后手段。这是因为如果您网站的用户想要覆盖您的风格，重要的是成为一个有用的工具。请参阅此文章：Don't use "!important"

Answer 2

css为具有更多specific选择器的元素赋予更多权重。因此，如果您希望#Content h3不要覆盖h3#issueHeader，请为其指定另一个选择器：例如#Content h3＃issuesHeader

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

Answer 3

尝试将选择器设置为：

#Content h3#issueHeader {
    color: blue;
}

这应该解决它。

Answer 4

你正在拥有所谓的CSS特异性。这是一个很好的写法（使用星球引导），它解释了点的基础知识以及如何计算级联的内容：

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 5

如果id =“issueHeader”重复，则可以执行此操作。

Answer 6

您可以使用 Shadow DOM （阴影DOM），该元素将为元素添加完整的封装，然后不受任何全局样式的影响。 您可以在本文中找到有关此内容的更多信息：https://bitsofco.de/what-is-the-shadow-dom/