Thứ Ba, 22 tháng 3, 2011

How to Override Inline Styles with Style Sheet

How to Override Inline Styles with Style Sheet

Tags:
There have been a few incidents when I came across wanting to override some inline styles and I always thought this was an impossible thing to do. The other day I stumbled across this article by Natalie Jost, and she actually came across some similar scenarios and came up with a very clever solution.
For example, lets say the html looked like this:
<div class="block">
 <span style="font-weight: bold; color: red;">Hello World</span>
</div>
You can override the child span by using the following css:
.block span[style]{
    font-weight: normal !important;
    color: #000 !important;
}
Unfortunately the down side of this is technique is that it will not work on IE6 and below, but it does work in IE7, IE8, Fire Fox, Safari, and Opera.
For more detailed explanation of this technique please check out Natalie Jost’s Article.

Related Posts

Không có nhận xét nào:

Đăng nhận xét