覆盖div的内联样式

Question

I have use the following code snippet to override the inline style of the div.

.gantttoolbar {
    height: 50px;
    display: block !important;
}

Is this correct way to override CSS style? OR Is there any other way to achieve this without using !important in the above code?

Answer 1

You can use [style] trick:

.gantttoolbar[style] {
    height: 50px; // Use !important to override height too
    display: block !important;
}

http://css-tricks.com/override-inline-styles-with-css/

Answer 2

There is no need to use the [style] css selector in this case as the element already has a class associated. The [style] only needs to be applied to select elements that do not have a class or id associated with them.

The !important is the only pure css way to override inline styles unfortunately, or you can use javascript to clear the styles on the elements, so that you don't use the important tag. To do that you would do the following:

document.querySelector('.gantttoolbar').removeAttribute('style');

Here is a fiddle http://jsfiddle.net/jRxzH/

Answer 3

Yes , this is right way to override the inline css.

but i recommend don`t override CSS, use css classes and use that rather then inline css. it will save your loading and rendering speed.