[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 (CSSStyleDeclaration や
cssText) 上で両方の宣言が保持されますが、
特性を反映する属性でアクセスできるのは後にある
(!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 では下だけ点線になります。 (名無しさん)