When does CSS's !important declaration not work?

There are many factors involved in determining which styles override one another. The lower a style declaration appears in the cascade, and the more specific it is in targeting the element, the more it will weigh against other styles.

This is the CSS2 standard for style inheritance:

1. If the cascade results in a value, use it.
2. Otherwise, if the property is inherited, use the value of the parent element, generally the computed value.
3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

Internally, the browser will calculate the specificity of a rule, according to the standard. The !important declaration will add weight to the rule, but dynamically assigning a style attribute will often take precedence, because it is usually more-highly specified..

Well so far research seems to suggest:

• IE7 supports !important.
• FireFox 2 and 3 support !important.
• IE6 supports !important in standards compliant mode.

However, IE6 (possible IE7) does not support !important in this case:

someselector {
  property: value !important;
  same-property: another-value;
}

It will use the second value (the last listed).

This is confirmed by this page:

In Internet Explorer 6 and earlier, if an important declaration appears before a normal declaration for the same property within the same declaration block, the normal declaration will overwrite the important declaration.

Internet Explorer 6 and 7 give importance to a declaration when an illegal identifier is used in place of the keyword important, instead of ignoring the declaration as they should.

Gizmo's comment states that Safari and Opera support !important.