Question

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

<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”的样式表，我的模块将无法访问该样式表。
最好不要使用style属性覆盖高度样式。

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

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

Answer 1

您可以通过覆盖它来关闭它：

身高：自动！重要;

Answer 2

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

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

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

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

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

Answer 3

你应该使用这个

身高：自动！重要;

Answer 4

你可以在CSS样式表中创建另一个更低的定义，它基本上会颠倒初始规则。你也可以在所说的规则上添加“！important”以确保它坚持下去。

Answer 5

我在joomla网站上工作时有类似的情况。

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

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

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

行

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

运作良好！

Answer 6

如果我正确理解了这个问题：您可以在css中使用“自动”，例如width:auto，然后它将返回默认设置

Answer 7

由于进行了编辑，该问题被推到了顶部。答案变得有些陈旧，如今已不如在标准中添加其他解决方案那样有用。

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

#elementId select.funTimes {
   all: initial;
}

这会将所有css属性设置为其初始值... note 某些初始值是继承的；结果仍在元素上进行某些格式化。

由于在阅读代码或将来进行审核时需要暂停，因此，除非您最多，否则不要使用它，因为审核过程很容易导致错误/错误！编辑页面时。但是很明显，如果有大量属性需要重置，那么“全部”是可行的方法。

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

Answer 8

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

.module {
  all: unset;
}

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

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

Answer 9

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>

Answer 10

请参阅下面的打字稿，以将css类再次重新应用于元素以覆盖父容器（通常是框架组件）css样式并强制使用自定义样式。您的应用程序框架（可能是角度的/反应的，可能是这样做的，因此重新应用了父容器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

Answer 11

有一堆可用于撤消CSS规则的值：初始，未设置和还原。来自W3C的CSS工作组的更多详细信息：

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

由于这是“草稿”，因此并非所有版本都完全受支持，但大多数主流浏览器都支持unset和initial，因此revert的支持较少。

如何忽略父css样式

11 个答案: