柳絮纷飞的日子——CSS笔记之四

1.IE6也认识!important.我们知道!important一般用做提升优先级，区分IE6和Firefox/Chrome/Opera/IE 其他版本的hack，不过并不是因为IE6完全不支持!important.

代码段一：

 

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

代码段二：

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

 

代码段一IE6下的字体颜色为绿色，在其他浏览器下是蓝色。代码段二在IE和FF/Chrome/Opera下均为蓝色。FireFox下，代码段一的字体颜色为蓝色，代码二的颜色为绿色。得出结论：CSS中，两个同样的属性，其一attribute:value !important;定义在前，其二attribute:value;定义在后， 如果二者被定义在同一个花括号内，则IE6是后面的样式覆盖前面的样式，IE6之外的别的浏览器则因为优先权的提升显示为前者的样式；如果二者定义在（指的是同一类或ID名下）不同的花括号，则此时Ie6下!important生效。这样，所有的浏览器都会显示前者attribute:value !important的样式效果。

2.多类选择符

类似于.class1   .class2这样用空格分隔的层次选择器，大家都很熟悉，匹配的是类class1的后代类class2。而对于无空格分隔的多类相连的写法，有些看法说需要根据浏览器区别对待，有人说这样的多类选择符IE6是不支持的。而我自己的测试表明，IE6也是支持这样的写法的。Eric Meyer《CSS权威指南》书中说，IE对多类选择符不支持并不正确，至少对IE6而言，并非如此。.warning.urgent {background: silver;} 有效，并非无效。

3.ie6.0对CSS2.1选择符的支持并不完整。
下面是IE不支持或者支持上存在问题的地方：

1）子选择符。

child selector

h1 > strong { color:red;} 无效，只能使用 h1 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;},只认最后一个:visited.

最好按如下顺序写：

a:link {color: navy;}

a:visited {color: gray;}

a:hover {color: red;}

a:active {color: yellow;}

IE6对伪类选择符支持，也仅限于超链。