作者：武利剑

标准参考

关于子选择器

选择一个特定父级元素的所有直接子级元素。子选择器由两个或两个以上的选择器组成，中间用 '>' 隔开。

例如：

div>span

它匹配 DIV 元素下所有的 SPAN 元素。

关于子选择器的详细信息，请参考 CSS2.1 规范 5.6 Child selectors 中的内容。

问题描述

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

造成的影响

子选择器无效，可能会导致 IE6 IE7(Q) IE8(Q) 中的样式跟其他浏览器不同。

受影响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

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

分析以下代码：

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

• 根据子选择器的概念，所有 DIV 元素下的 P 都会被选中

根据 CSS2.1 规范中的描述可知， P 中的文本颜色会变成红色。

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

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

所以对于子选择器的支持情况，如下表：

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

解决方案

避免在 IE6 IE7(Q) IE8(Q) 中使用子选择器。

参见

知识库

• ...

相关问题

• ...