作者：武利剑

标准参考

关于相邻兄弟选择器

选择紧邻指定元素的兄弟元素。

相邻兄弟选择器通常含有的标志是：E1 + E2， E2 是选择器的主题。 当 E1 和 E2 在文档树中含有相同的父节点，并且 E2 紧随 E1 时，E2 被匹配，非元素节点会被忽略。

关于相邻兄弟选择器的详细信息，请参考 CSS2.1 规范 5.7 Adjacent sibling 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></div> <p>Aloha!</p> <p>Hello!</p>

• 按照规范中的说明，紧挨 DIV 元素的第一个 P 元素会被选中；

根据 CSS2.1 规范中的描述可知，文本 'Aloha!' 应该变成红色。

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

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

所以对于相邻兄弟选择器的支持情况，如下表：

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

解决方案

避免在非标准模式中对 IE7 以下版本使相邻兄弟选择器。

参见

知识库

• ...

相关问题

• ...