!important

!important

[1] Re: [CSS21] Status of defult (intrinsic) style sheet in UA <http://lists.w3.org/Archives/Public/www-style/2005Nov/thread.html#107>

UA スタイル・シートの !important の意味は?? (名無しさん 2005-11-26 16:52:21 +00:00)

[2] 同じ宣言ブロック中に同じ特性の複数の宣言を、 !important → 非 !important の順に並べた例 <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20border-bottom-color%3A%20blue%3B%0D%0A%20%20border-bottom-width%3A%20thick%3B%0D%0A%20%20border-bottom-style%3A%20solid%20!important%3B%0D%0A%20%20border-bottom-style%3A%20dotted%3B%0D%0A%7D%0D%0A%0D%0A;h=%3Cp%3ECheck%20the%20bottom%20border...%20%3Ccode%3Esolid%3C%2Fcode%3E%20or%20%3Ccode%3Edotted%3C%2Fcode%3E%3F%3C%2Fp%3E%0D%0A;p=n;x=style-element> (名無しさん)

[3] >>2 改訂 <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20color%3A%20green%20!important%3B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D%0D%0A%0D%0A;h=%3Cp%3EThis%20paragraph%20should%20be%20green.%3C%2Fp%3E%0D%0A;p=n;x=style-element> (名無しさん)

[4] CSS 2.1 的には、順序に関わらず !important勝つはずです。 (名無しさん)

[5] Firefox 2 では CSSOM (特性反映する属性)、 cssTextレンダリング共に >>4 のようになります。

Opera 9 では CSSOM (CSSStyleDeclarationcssText) 上で両方の宣言が保持されますが、 特性反映する属性でアクセスできるのは後にある (!importantない) 宣言のようです。 レンダリング上は !important宣言が適用されます。

WinIE 6 では CSSOM 的にもレンダリング上も !important宣言が無視され、 非 !important な後の宣言が適用されます。

(名無しさん)

[6] >>2>>4-5 は shorthand 特性に対しても (構成要素になる特性について個別に) 同じことが言えるようです。

たとえば、<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20border-bottom-color%3A%20blue%3B%0D%0A%20%20border-bottom-width%3A%20thick%3B%0D%0A%20%20border-bottom%3A%20solid%20!important%3B%0D%0A%20%20border-bottom-style%3A%20dotted%3B%0D%0A%7D%0D%0A%0D%0A;h=%3Cp%3ECheck%20the%20bottom%20border...%20%3Ccode%3Esolid%3C%2Fcode%3E%20or%20%3Ccode%3Edotted%3C%2Fcode%3E%3F%3C%2Fp%3E%0D%0A;p=n;x=style-element> では Firefox 2 と Opera 9 では下も実線WinIE 6 では下だけ点線になります。 (名無しさん)

[7] >>2>>4-5 は shorthand 特性に対しても (構成要素になる特性について個別に) 同じことが言えるようです。

たとえば、<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20border-bottom-color%3A%20blue%3B%0D%0A%20%20border-bottom-width%3A%20thick%3B%0D%0A%20%20border-bottom%3A%20solid%20!important%3B%0D%0A%20%20border-bottom-style%3A%20dotted%3B%0D%0A%7D%0D%0A%0D%0A;h=%3Cp%3ECheck%20the%20bottom%20border...%20%3Ccode%3Esolid%3C%2Fcode%3E%20or%20%3Ccode%3Edotted%3C%2Fcode%3E%3F%3C%2Fp%3E%0D%0A;p=n;x=style-element> では Firefox 2 と Opera 9 では下も実線WinIE 6 では下だけ点線になります。 (名無しさん)