如何忽略父 CSS 样式

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

<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 我可以关闭父样式和一切都很好，这是我要去的效果。

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

274960 次浏览
小开
最佳答案

It must be overridden. You could use:

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


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

Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?

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

小开

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.

小开

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:

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

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.

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

You could turn it off by overriding it like this:

height:auto !important;

小开

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

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

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

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

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

worked well!

小开

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

小开

You should use this

height:auto !important;

小开

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

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

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.

#elementId select.funTimes {
all: initial;
}

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: https://drafts.csswg.org/css-cascade/#all-shorthand

小开

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

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

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

小开

The all property in CSS resets all of the selected element’s properties, except the direction and unicode-bidi properties that control text direction.

.module {
all: unset;
}

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.

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

提交答案