柳絮が飛び交う日——CSSノートその4

1.IE 6も知っています!important.わかってる!importantは一般的に優先度を上げて、IE 6とFirefox/Chrome/Opera/IEの他のバージョンのhackを区別するのに使われていますが、IE 6が完全にサポートされていないわけではありません!important.
コードセグメント1:
 

<style type="text/css">
.test{
	color:blue !important;
	color:green;
}
</style>
<div class="test">    </div>

コードセグメント2:

<style type="text/css">
.test{
	color:blue !important;
}
.test{
	color:green;
}
</style>
<div class="test">    </div>

 
コードセグメントIE 6のフォント色は緑で、他のブラウザの下では青です.コードセグメント2は、IEおよびFF／Chrome／Operaの両方で青色である.FireFoxでは、コードセグメント1のフォント色は青で、コード2の色は緑です.結論を出す:CSSの中で、2つの同じ属性、その1つのattribute:value!important;定義は前で、その2 attribute:value;定義後、両方が同じかっこ内に定義されている場合、IE 6は後のスタイルが前のスタイルを上書きし、IE 6以外のブラウザは優先度の向上により前者のスタイルとして表示される.両者が(同じクラスまたはID名の下を指す)異なるカッコで定義されている場合、Ie 6の下!importantが有効になります.これにより、すべてのブラウザに前者attribute:valueが表示されます.importantのスタイル効果.
2.複数種類のセレクタ
に似ているclass1   .class 2のようにスペースで区切られた階層セレクタは、クラスclass 1の子孫クラスclass 2とよく知られています.スペースのない多種類の接続の書き方については、ブラウザによって区別する必要があるという見方もあり、このような多種類の選択子IE 6はサポートされていないという見方もあります.私自身のテストでは、IE 6もこのような書き方をサポートしていることが明らかになりました.Eric Meyerの《CSS権威ガイド》の本の中で、IEは多種類の選択子に対して支持しないのは正しくなくて、少なくともIE 6にとって、そうではありませんと言います.warning.urgent {background: silver;} 有効です.無効ではありません.
3.ie6.0対CSS 2.1セレクタのサポートが不完全です.以下はIEがサポートしていないか、サポートに問題があるところです.
1)サブセレクタ.
child selector
h1 > strong { color:red;} 無効です.h 1 strong{color:red;}しか使用できません.サブセレクタはサポートされていませんが、派生セレクタはサポートされています.
2)隣接する兄弟の選択子.
sibling selector
li+li { font-style:bold; } 無効です.
3)属性選択子.
attribute selector
h1[class] {color: silver;} 無効です.
4)擬似クラス選択子
Pseudo-Class Selectorは限定的にサポートされています.:first-child擬似クラス言語擬似クラス:beforeおよび:after擬似クラス擬似クラス:hoverはa要素でのみ機能し、擬似クラス:focusをサポートしません.a要素のフォーカス取得時に使用:active
a:link :visited { color:#fff;},最後の1つだけ認めます:visited.
以下の順序で書いたほうがいいです.
a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}
IE 6は、擬似クラスセレクタに対してもサポートされており、ハイパーチェーンに限られている.