如何忽略父CSS样式

Question 1

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

<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属性覆盖高度样式。

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

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

Question 2

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

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

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

确保!important在css样式中使用标志，例如CSSmargin-top: 0px !important 中的！important是什么意思？

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

Question 3

您可以这样重写它来关闭它：

height：自动！重要

Question 4

由于进行了编辑，此操作被推到了顶部。答案有些陈旧，并且今天不如在标准中添加其他解决方案那样有用。

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

#elementId select.funTimes {
   all: initial;
}

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

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

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

Question 5

您可以在CSS样式表的下方创建另一个定义，该定义基本上颠倒了初始规则。您还可以在规则中附加“！important”，以确保其有效。

Question 6

你应该用这个

height：自动！重要

Question 7

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

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

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

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

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

运作良好！

Question 8

如果我理解正确的问题是：你可以使用auto在CSS类似这样的width: auto;，它会返回到默认设置。

Question 9

CSS有一种方法可以简单地添加其他样式（例如，在页面的头部，它将覆盖链接的样式表），这很有意义，例如：

<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>

Question 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];
            }
          });
        }
      }

郑Zheng（Mike Zheng）tradrejoe@gmail.com

Question 11

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

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

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