如何忽略父css样式

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

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

一旦设置了样式,它可以被禁用还是必须被覆盖？

Answer 1

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

身高:自动!重要;

Answer 2

它必须被覆盖.你可以使用:

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

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

确保你!important在CSS样式中使用flag例如margin-top: 0px !important 什么!在CSS中重要的意思是什么？

您可以使用属性选择器,但由于旧版浏览器不支持(阅读IE6等),最好添加一个类名

Answer 3

由于编辑，这被推到了顶部......答案已经变得有点陈旧，并且今天没有像标准中添加的另一个解决方案那么有用。

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

#elementId select.funTimes {
   all: initial;
}

这会将所有 css 属性设置为它们的初始值……注意一些初始值是继承的；导致元素上仍在进行某些格式设置。

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

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

Answer 4

CSS 中的 all 属性会重置所有选定元素\xe2\x80\x99s 属性，但控制文本方向的 Direction 和 unicode-bidi 属性除外。

\n

.module {\n  all: unset;\n}\n

\n

它的要点是允许组件级别的样式重置。有时，从头开始设计样式比对抗现有的一切要容易得多。

\n

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

\n