如何忽略父 CSS 样式答案

【问题标题】：How to ignore parent css style如何忽略父 CSS 样式
【发布时间】：2010-10-31 02:31:37
【问题描述】：

我想知道如何忽略父样式并使用默认样式（无）。我将以我的具体案例为例，但我很确定这是一个普遍的问题。

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

我不想解决这个问题的方法：

我无法编辑设置了“#elementId select”的样式表，我的模块将无法访问它。
最好不要使用样式属性覆盖高度样式。

例如使用firebug我可以关闭父样式，一切都很好，这就是我想要的效果。

设置样式后，可以禁用还是必须覆盖它？

【问题讨论】：

标签： css

【解决方案1】：

它必须被覆盖。你可以使用：

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

确保您在 css 样式中使用 !important 标志，例如margin-top: 0px !importantWhat does !important mean in CSS?

您可以使用属性选择器，但由于旧版浏览器不支持（阅读 IE6 等），最好添加类名

【讨论】：

我总是被唠叨说你应该尽可能避免!important

【解决方案2】：

您可以在 CSS 样式表的较低位置创建另一个定义，该定义基本上颠倒了初始规则。您还可以将“！important”附加到所述规则以确保它坚持。

【讨论】：

【解决方案3】：

如果 CSS 有一种方法可以简单地添加额外的样式（例如，在页面的 head 部分中，它将覆盖链接的样式表），这样的方式是有意义的：

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

并关闭所有以前应用的样式，但没有办法这样做。您必须覆盖 height 属性并将其设置为页面头部的新值。

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

【讨论】：

【解决方案4】：

你可以像这样覆盖它来关闭它：

高度：自动！重要；

【讨论】：

我建议不要在生产标记中使用!important - 它实际上应该只在调试时使用。
@Amicable 你能解释一下为什么不建议这样做吗？
@pipo_dev 网上有很多文章可以比我在评论和示例中更好地解释它。简而言之，这是一个黑客。 99% 的时间它用于 lei 的适当修复，这将导致更好和更可维护的 CSS。 !important 的一些可接受用途包括实用程序类和针对 IE7 等古老浏览器的向后兼容性黑客
deosnt 工作。分页是表中的最后一个 td。 .detailTable td{ 宽度：50%; } .pagnation{ 宽度：100% !important; }
我不同意@Amicable。当您遇到无法控制但仍想覆盖的父主题时，确实没有其他选择可以使用!important。

【解决方案5】：

我在一个 joomla 网站上工作时遇到了类似的情况。

为受影响的模块添加了一个类名。在你的情况下：

<select name="funTimes" class="classname">

然后在css中进行了以下单行更改。加了一行

#elementId div.classname {style to be applied !important;}

效果很好！

【讨论】：

【解决方案6】：

如果我正确理解了这个问题：你可以在CSS 中使用auto，就像width: auto; 这样它会回到默认设置。

【讨论】：

【解决方案7】：

你应该使用这个

高度：自动！重要；

【讨论】：

【解决方案8】：

请参阅下面的打字稿，以再次将 css 类重新应用于元素以覆盖父容器（通常是框架组件）css 样式并强制您的自定义样式。您的应用程序框架（无论是 angular/react，可能会这样做，因此父容器 css 被重新应用，并且您在 css-class-name 中的任何预期效果都不会出现在您的子元素中。调用 this.overrideParentCssRule(childElement, ' css-class-name'); 做框架刚刚做的事情（在 document.ready 或事件处理程序结束时调用它）：

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Mike Zheng tradrejoe@gmail.com

【讨论】：

你能解释一下为什么要为这么简单的需求使用 typescript 吗？
这个解决方案对于非常简单的问题来说非常复杂

【解决方案9】：

由于进行了编辑，这被推到了顶部……答案已经有点陈旧了，而且今天不像标准中添加了另一个解决方案那样有用。

现在有一个“all”速记属性。

#elementId select.funTimes {
   all: initial;
}

这会将所有css属性设置为其初始值... 注意一些初始值是继承的；导致某些格式仍在元素上发生。

由于在阅读代码或将来审查代码时需要暂停，除非您最常使用它，否则不要使用它，因为审查过程可能会产生错误/错误！编辑页面时。但很明显，如果有大量的属性需要重置，那么“all”就是要走的路。

标准在线：https://drafts.csswg.org/css-cascade/#all-shorthand

【讨论】：

我正在构建一个模态阻止网站，这是我的 HTML 标签不被网站样式覆盖的解决方案。

【解决方案10】：

有很多值可以用来撤销 CSS 规则：initial、unset 和 revert。来自 W3C 的 CSS 工作组的更多详细信息：

https://drafts.csswg.org/css-cascade/#defaulting-keywords

由于这是“草稿”，并非所有内容都得到完全支持，但 unset 和 initial 在大多数主要浏览器中都存在，因此对 revert 的支持较少。

【讨论】：

【解决方案11】：

CSS 中的 all 属性重置所有选定元素的属性，除了控制文本方向的方向和 unicode-bidi 属性。

.module {
  all: unset;
}

它的重点是允许样式的组件级重置。有时，从头开始设计样式要比与已经存在的所有东西作斗争要容易得多。

/* -------- For Your code -------- */
#elementId select.funTimes {
  all: unset;
}

【讨论】：