如何防止我的样式被周围 div 上的另一种样式覆盖？

Posted 2023-03-05

【中文标题】如何防止我的样式被周围 div 上的另一种样式覆盖？

【英文标题】：How do I prevent my style from being overridden another style on a surrounding div?

【发布时间】：2010-11-14 20:30:14

【问题描述】：

这似乎很简单，但这是个问题。

样式表如下：

#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 选择器并没有像我期望的那样覆盖 Content 选择器，Firebug 和我的眼球告诉我颜色是从 div 继承的，并且 issueHeader 选择器被覆盖了。嗯？

【问题讨论】：

谷歌“CSS选择器特异性”之类的。或者快速查看stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

感谢所有回复。 CSS 不是我的强项。 Zack，我赞成你成为第一名，但我选择了 dnagirl，因为她的回答对为什么会这样提供了更多解释。

Re RegDwight - 我首先询问了 Google，但有时很难在大量回复中找到您正在寻找的具体答案。不过，该链接是一个很好的资源，谢谢。

【参考方案1】：

CSS 为具有更多specific 选择器的样式赋予更多权重。因此，如果您希望 #Content h3 不覆盖 h3#issueHeader，请给它另一个选择器：例如#Content h3#issueHeader

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

然而，由于权重的计算方式，我们需要在选择器中使用closest元素/类来获取足够的权重，例如：

假设我们要设置“z”元素的样式。 但我们的样式被“y z”选择器（不带引号）覆盖。 即使我们的选择器更具体： 从“a b c”一直到“u v w”（没有x）。 我们不能得到比“y z”更多的权重。 但是“x y z”选择器将有足够的权重（因为 x-tagged-element 是 y-tagged-element 的父级）。

【参考方案2】：

你可以使用 Shadow DOM 来为你的元素添加一个完整的封装，这样它就不会受到任何全局样式的影响。 您可以在本文中找到更多相关信息：https://bitsofco.de/what-is-the-shadow-dom/

【参考方案3】：

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

h3#issueHeader 
  color: blue !important;

但是，IE6 仅部分支持它

---

此外，这只能作为其他解决方案的最后手段。这是因为如果您网站的用户想要覆盖您的风格，重要的工具会成为一个有用的工具。

【讨论】：

使用 !important 应该只是最后的手段。在这种情况下，也可以使用更具体的选择器。

@Zack - 谢谢你；我不确定为什么不应该使用它并进行了一些谷歌搜索。我已经相应地更新了我的答案。

@Zack 为什么它应该是最后的手段。

@TheBlackBenzKid 参见上面提到的文章。

这对我来说确实是不得已而为之，我正在尝试自定义 ngx-markdown 的样式。它只允许您为 code 元素的现有 css 名称添加前缀，以用于自定义样式，无论如何它都会被它自己覆盖。 ` !important ` 在这里是救命稻草。 :)

【参考方案4】：

您拥有所谓的 CSS 特异性。这是一篇很好的文章（使用星球大战启动），它解释了点数的基础知识以及如何计算级联：

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

【讨论】：

链接断开 -- 请修复

【参考方案5】：

如果 id="issueHeader" 重复，可以这样做。

【讨论】：

我假设您的意思是它是否用于多种样式？不，我不这样做。这是一个非常小的样式表，因此很容易检查。

【参考方案6】：

尝试将选择器设置为：

#Content h3#issueHeader 
    color: blue;

这应该可以解决它。