Hướng dẫn css ignore parent style

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.

    
        fish
        eat
        cows
    

Ways I do not want to solve this problem:

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

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?

BoltClock

674k155 gold badges1361 silver badges1333 bronze badges

asked Jun 3, 2009 at 19:24

SeanDowneySeanDowney

16.9k18 gold badges80 silver badges89 bronze badges

You could turn it off by overriding it like this:

height:auto!important;

Trott

61.8k22 gold badges159 silver badges201 bronze badges

answered May 3, 2010 at 21:19

Fabian BrenesFabian Brenes

7481 gold badge8 silver badges12 bronze badges

5

It must be overridden. You could use:

#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
 
Dhwaneel
5415 silver badges8 bronze
badges
 answered Jun 3, 2009 at 19:26
 
PatrikAkerstrandPatrikAkerstrand
44.8k11 gold badges77 silver badges94 bronze badges
1
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
 answered Dec 28, 2018 at 7:38
 
1
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.
 answered Jun
3, 2009 at 19:33
 
JasonJason
50.3k37 gold badges128 silver badges185 bronze badges
You should use this 
height:auto!important;
 answered May 27, 2015 at 7:57
 
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;
}
 answered Apr 12, 2021 at 12:20
 
I had a similar situation while working on a joomla website. 
Added a class name to the module to be affected. In your case:

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

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

worked well!

answered Feb 24, 2012 at 20:11

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.

Jeroen

1,1621 gold badge11 silver badges22 bronze badges

answered Jan 20, 2013 at 13:27

elad silverelad silver

8,5094 gold badges41 silver badges63 bronze badges

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:

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.

Trott

61.8k22 gold badges159 silver badges201 bronze badges

answered Jun 4, 2009 at 20:34

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.

answered May 19, 2020 at 7:48

cyberspycyberspy

96310 silver badges13 bronze badges

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

answered Dec 4, 2018 at 1:03

2