作者：武利剑

标准参考

关于 ':first-child' 伪元素

‘:first-child’ 伪元素匹配其他元素的第一个子元素。

关于 ’:first-child‘ 伪元素的详细信息，请参考 CSS2.1 规范 5.11.1 :first-child pseudo-class 中的内容。

问题描述

CSS 2.1 规范中描述的若干种选择器，在 CSS 1 历史规范中均无规定，这导致早期版本的浏览器，如： IE6 IE7(Q) IE8(Q) 不支持 ':first-child' 伪元素。

造成的影响

使用了 ‘:first-child’ 伪元素，会使页面在 IE6 IE7(Q) IE8(Q) 中无法按预期效果给元素设置样式，显示效果会与其他浏览器不同。

受影响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

对于此问题，我们通过以下的测试用例来说明。

分析以下代码：

<style type="text/css"> div p:first-child { color: red; }
                </style> <div> <p>Aloha!</p> <p>Hello!</p>
                </div>

• 以上样式中使用了 ‘:first-child’ 伪元素，用来选中 DIV 元素下的第一个 P 元素；

根据 CSS2.1 规范中的描述可知，如果选择器生效，那么文本 'Aloha!' 应该变成红色。

这段代码在不同的浏览器环境中的表现：

IE6 IE7(Q) IE8(Q)	IE8(S) Firefox Opera Safari Chrome

所以对于 ':first-child' 伪元素的支持情况，如下表：

IE6	IE7(Q)	IE7(S)	IE8(Q)	IE8(S)	Firefox	Safari	Opera	Chrome
N	N	Y	N	Y	Y	Y	Y	Y

【注】：实际中其他除常用 HTML 标记同样适用此例，并非仅 P 标记自身不支持，本文将不在一一测试证明。

解决方案

避免在 IE6 IE7(Q) IE8(Q) 中使用 ‘:first-child’ 伪元素。

参见

知识库

• ...

相关问题

• ...