打印

RS8002: IE6 IE7(Q) IE8(Q) 不支持相邻兄弟选择器

作者:武利剑

标准参考

关于相邻兄弟选择器

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

相邻兄弟选择器通常含有的标志是: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 以下版本使相邻兄弟选择器。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.3
Chrome 6.0.437.3 dev
Safari 5.0
Opera 10.60
测试页面: adjacent_sibling_selectors.html
本文更新时间: 2010-06-23

关键字

相邻兄弟选择器 Adjacent brother selector