blocks|key|3322290|text|它必须被覆盖。您可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3322291|
<select+name="funTimes"+class="funTimes"+size="5">

#elementId+select.funTimes+{
+++/*+Override+styles+here+*/
}|code-block|syntax|javascript|3322292|确保在css样式中使用!important标志，例如margin-top:+0px+!important+What+does+!important+mean+in+CSS?|offset|length|style|CODE|3322293|您可以使用属性选择器，但由于传统浏览器不支持属性选择器(请参阅IE6等)，因此最好添加一个类名|3322294|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css^0|0|0|B|A|Q|Q|1H|X|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

It must be overridden. You could use:

<pre><code>&lt;!-- Add a class name to override --&gt;
&lt;select name="funTimes" class="funTimes" size="5"&gt;

#elementId select.funTimes {
 /* Override styles here */
}
</code></pre>

Make sure you use <code>!important</code> flag in css style e.g. <code>margin-top: 0px !important</code> <a href="https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css">What does !important mean in CSS?</a>

You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name

blocks|key|3109357|text|您可以在CSS样式表中创建另一个更低的定义，它基本上颠倒了最初的规则。您还可以将"!important“附加到所述规则，以确保它有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3109358|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.

blocks|key|338461|text|对于CSS来说，有一种方法可以简单地添加一个额外的样式(例如，在页面的标题部分，它将覆盖链接的样式表)是有意义的，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338462|<head>
<style>
#elementId+select+{
++++/*+turn+all+styles+off+(no+way+to+do+this)+*/
}
</style>
</head>|code-block|syntax|javascript|338463|并关闭所有以前应用的样式，，但没有办法做到这一点。您必须覆盖height属性，并在页面的head部分中将其设置为一个新值。|offset|length|style|BOLD|338464|<head>
<style>
#elementId+select+{
++++height:1.5em;
}
</style>
</head>|338465|entityMap^0|0|0|D|B|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

It would make sense for CSS to have a way to simply add an additional style (in the head section of your page, for example, which would override the linked style sheet) such as this:

<pre><code>&lt;head&gt;
&lt;style&gt;
#elementId select {
 /* turn all styles off (no way to do this) */
}
&lt;/style&gt;
&lt;/head&gt;
</code></pre>

and turn off all previously applied styles, but there is no way to do this. You will have to override the height attribute and set it to a new value in the head section of your pages.

<pre><code>&lt;head&gt;
&lt;style&gt;
#elementId select {
 height:1.5em;
}
&lt;/style&gt;
&lt;/head&gt;
</code></pre>

blocks|key|3322356|text|您可以通过如下方式覆盖它来关闭它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3322357|height:自动！重要；|3322358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You could turn it off by overriding it like this:

height:auto !important;

blocks|key|3322383|text|我在joomla网站上工作时也遇到过类似的情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3322384|将类名添加到要受影响的模块。在您的案例中：|3322385|<select+name="funTimes"+class="classname">|code-block|syntax|javascript|3322386|然后在css中进行了以下单行更改。添加了这行|3322387|#elementId+div.classname+{style+to+be+applied+!important;}|3322388|效果很好！|3322389|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I had a similar situation while working on a joomla website. 

Added a class name to the module to be affected. In your case:

<pre><code>&lt;select name="funTimes" class="classname"&gt;
</code></pre>

then made the following single line change in the css. Added the line

<pre><code>#elementId div.classname {style to be applied !important;}
</code></pre>

worked well!

blocks|key|3322400|text|如果我没理解错的话:你可以像这样在CSS中使用auto，然后它就会恢复到默认设置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3322401|entityMap^0|H|3|N|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

If I understood the question correctly:
you can use <code>auto</code> in the <code>CSS</code> like this <code>width: auto;</code> and it will go back to default settings.

blocks|key|339830|text|你应该使用这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|339831|height:自动！重要；|339832|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

You should use this 

height:auto !important;

blocks|key|338518|text|请参阅下面的typescript以再次将css类应用于元素，以覆盖父容器(通常是框架组件)+css样式并强制您的自定义样式。您的应用程序框架(可能是angular/react，这样做是为了重新应用父容器css，并且css-class-name中的任何预期效果都不会显示在您的子元素中。调用this.overrideParentCssRule(childElement，'css-class-name')；来完成框架刚刚做的事情(在document.ready或end+of+event+handler中调用它)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|338519|++++++overrideParentCssRule(elem:+HTMLElement,+className:+string)+{
++++++++let+cssRules+=+this.getCSSStyle(className);
++++++++for+(let+r:+number+=+0;+r+<+cssRules.length;+r%2B%2B)+{
++++++++++let+rule:+CSSStyleRule+=+cssRules[r];
++++++++++Object.keys(rule.style).forEach(s+=>+{
++++++++++++if+(isNaN(Number(s))+&&+rule.style[s])+{
++++++++++++++elem.style[s]+=+rule.style[s];
++++++++++++}
++++++++++});
++++++++}
++++++}|code-block|syntax|javascript|338520|tradrejoe@gmail.com+|338521|Mike+Zheng|unordered-list-item|338522|338523|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Please see below typescript for re-applying css class again to an element to override parent container (usually a framework component) css styles and force your custom styles. Your app framework (be it angular/react, probably does this so the parent container css was re-applied and none of your expected effects in css-class-name is showing up for your child element. Call this.overrideParentCssRule(childElement, 'css-class-name'); to do what the framework just did (call this in document.ready or end of event handler): 

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

<ul>
<li>Mike Zheng tradrejoe@gmail.com</li>
</ul>

blocks|key|340961|text|因为一次编辑，这个被放到了最上面...答案已经有点过时了，而且今天没有那么有用，因为另一个解决方案已经添加到标准中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340962|现在有了一个"all“速记属性。|340963|#elementId+select.funTimes+{
+++all:+initial;
}|code-block|syntax|javascript|340964|这会将所有css属性设置为其初始值...注一些初始值是继承的；这会导致元素上仍然会发生一些格式化。|340965|因为在将来阅读代码或审查它时需要暂停，所以不要使用它，除非你在审查过程中最容易犯错误/bug！在编辑页面时。但是很明显，如果有大量的属性需要重置，那么"all“就是最佳选择。|340966|标准在这里在线：https://drafts.csswg.org/css-cascade/#all-shorthand|offset|length|340967|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/css-cascade/#all-shorthand^0|0|0|0|0|0|8|1F|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.

There is now an "all" shorthand property.

<pre><code>#elementId select.funTimes {
 all: initial;
}
</code></pre>

This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.

Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.

Standard is online here: <a href="https://drafts.csswg.org/css-cascade/#all-shorthand" rel="noreferrer">https://drafts.csswg.org/css-cascade/#all-shorthand</a>

blocks|key|3109535|text|有一堆值可以用来撤销CSS规则:+initial，unset和revert。W3C上CSS工作组的更多详细信息：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3109536|https://drafts.csswg.org/css-cascade/#defaulting-keywords|offset|length|3109537|由于这是“草稿”，并不是所有的都完全支持，但unset和initial在大多数主流浏览器中都有，revert的支持较少。|3109538|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1L|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

There are a bunch of values that can be used to undo CSS rules: initial, unset &amp; revert.
More details from the CSS Working Group at W3C:

<a href="https://drafts.csswg.org/css-cascade/#defaulting-keywords" rel="nofollow noreferrer">https://drafts.csswg.org/css-cascade/#defaulting-keywords</a>

As this is 'draft' not all are fully supported, but unset and initial are in most major browsers, revert has less support.

blocks|key|343333|text|CSS中的all属性重置所选元素的所有属性，但控制文本方向的direction和unicode-bidi属性除外。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343334|.module+{
++all:+unset;
}|code-block|syntax|javascript|343335|它的要点是允许组件级别的样式重置。有时候，从头开始设计样式要容易得多，而不是对抗所有已经存在的东西。|343336|/*+--------+For+Your+code+--------+*/
#elementId+select.funTimes+{
++all:+unset;
}|343337|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The all property in CSS resets all of the selected element’s properties, except the direction and unicode-bidi properties that control text direction.
<pre><code>.module {
 all: unset;
}
</code></pre>
The point of it is allowing for component-level resetting of styles. Sometimes it’s far easier to start from scratch with styling rather than fight against everything that is already there.
<pre><code>/* -------- For Your code -------- */
#elementId select.funTimes {
 all: unset;
}
</code></pre>

I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.

<pre><code>&lt;style&gt;
#elementId select {
 height:1em;
}
&lt;/style&gt;

&lt;div id="elementId"&gt;
 &lt;select name="funTimes" style="" size="5"&gt;
 &lt;option value="test1"&gt;fish&lt;/option&gt;
 &lt;option value="test2"&gt;eat&lt;/option&gt;
 &lt;option value="test3"&gt;cows&lt;/option&gt;
 &lt;/select&gt;
&lt;/div&gt;
</code></pre>

Ways I do not want to solve this problem:

<ul>
<li>I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that. </li>
<li>Preferably not override the height style using the style attribute. </li>
</ul>

For example using firebug i can turn off the parent style and all is well, this is the effect I am going for. 

Once a style is set, can it be disabled or must it be overridden?

How to ignore parent css style

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想知道如何忽略父样式而使用默认样式(无)。我将以我的具体案例为例，但我非常确定这是一个一般性问题。<style>#elementId select { height:1em;}</style><div id="elementId"> <select name="funTimes" style="" siz...

问如何忽略父css样式
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何忽略父css样式EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何忽略父css样式
EN