How To Overrule !important?

I wrote a bit of html with some css styling injected into a third party site. But, their styling is messing with mine due to some !important declarations. I don't want this, and I

Solution 1:

The !important declaration overrides everything else, even inline styles and more specific hierarchy. The only way to override an !important is with an even more specific !important.

And this is why !important should be avoided.

Solution 2:

You can overwrite !important contrary to what most people believe. You can even use this technique to overwrite inline styles applied by JS or 3rd party plugins (ex. Facebook!!) The most powerful way is like so:

td[style] {height: 110px!important;}

It acts as if you injected the style inline to the html because you are applying the styles to the actual style attribute of the tag. The combo of being inline and !important should trump everything, except for a style that is applied later and also inline and !important

Here's a fiddle with the working code: http://jsfiddle.net/9LvzP/ You can see that even though background-color: green !important comes before background-color: blue blue is more powerful and gets applied

Solution 3:

Define the class with proper hierarchy that will work for you.

.list .row span{
   color:red !important;
}

<div class="list">
<divclass="row"><span>Your text </span></div>

Try to do something similar to what I have created here.