CSS在Internet Explorer 6, 7 和8中的差别（2）

伪类和伪元素

:hover后面的后代选择器

示例

a:hover span { color: #0f0;}

描述

一个元素可以被:hover伪类后面的选择器定位，就像后代选择器一样。上面的例子，在鼠标悬停的时候，将会改变a元素内的span元素中的文字的颜色。

支持情况

IE6
No

IE7
Yes

IE8
Yes

链伪类

示例

a:first-child:hover { color: #0f0;}

描述

伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个a标签，并将hover伪类P应用到它上。

支持情况

IE6
No

IE7
Yes

IE8
Yes

非锚点元素中的:hover

示例

div:hover { color: #f00;}

描述

:hover伪类可以应用到任何元素的悬停状态，而不只是a标签。

支持情况

IE6
No

IE7
Yes

IE8
Yes

:first-child伪类

示例

div li:first-child { background: blue;}

描述

改伪类定位每一个指定的元素的父级元素的第一个子元素。

支持情况

IE6
No

IE7
Yes

IE8
Yes

Bugs

IE7中，如果要定位的第一个子元素之前有HTML注释，first-child伪类将会无效。

:focus伪类

示例

a:focus { border: 1px solid red;}

描述

该伪类定位有键盘焦点的所有元素。

支持情况

IE6
No

IE7
No

IE8
Yes

:before 和:after 伪类

示例

#box:before { content: "本段文字在盒子前面";} #box:after { content: "本段文字在盒子后面";}

描述

这两个伪元素分别在指定元素的前面和后面添加生成的内容，结合content属性一起使用。

支持情况

IE6
No

IE7
No

IE8
Yes