低版本IE对某些CSS选择器的支持缺陷

经常在使用CSS选择器时，会发现，某些版本的IE浏览器对高级选择器的支持不尽人意。可能是标准老更新，老的IE浏览器当时还没有想到会有那种选择器吧，呵呵。

对于这几个支持的不好的选择器我会一一说明，然后，举例。以下说明中，Q代表Quirks Modes 即混杂模式， S 代表 Standards Modes 即标准模式。关于模式的说明，请参见:
【分享】浏览器兼容性问题综述——正确的认识浏览器兼容性问题

子选择器
简介
选择一个特定父级元素的所有直接子级元素。子选择器由两个或两个以上的选择器，中间用 '>' 隔开。
例如：
div>span
它匹配 DIV 元素下所有的 SPAN 元素。

IE6 IE7(Q) IE8(Q)不支持子选择器

HTML code

   
   

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

    
    </
    
    style
    
    >
    
    

    
    <
    
    div
    
    >
    
    
   
    
    <
    
    p
    
    >
    
    Aloha!
    
    </
    
    p
    
    >
    
    

    
    </
    
    div
    
    >
   
   

根据子选择器的概念，所有DIV元素下的P都会被选中。事实怎么样呢？
IE6 IE7(Q) IE8(Q)下，文本文字还是黑色。也就是说，这个选择器是无效的。

普通兄弟选择器
简介
选择指定元素后面的所有兄弟元素。
例：

CSS code

   
   

    
    span ~ img
   
   

应选中span的所有兄弟元素。

IE6 IE7(Q) IE8(Q)不支持普通兄弟选择器

HTML code

   
   

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

    
    </
    
    style
    
    >
    
    

    
    <
    
    div
    
    ></
    
    div
    
    >
    
    

    
    <
    
    p
    
    >
    
    Aloha!
    
    </
    
    p
    
    >
   
   

根据标准，DIV 的兄弟节点 P 应该被选中，所以，P中文字的颜色应该是红色。
经测试，在 IE6 IE7(Q) IE8(Q)下，文本文字还是黑色。证明，此选择器无效。

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

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

HTML code

   
   

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

    
    </
    
    style
    
    >
    
    

    
    <
    
    div
    
    ></
    
    div
    
    >
    
    

    
    <
    
    p
    
    >
    
    Aloha!
    
    </
    
    p
    
    >
    
    

    
    <
    
    p
    
    >
    
    Hello!
    
    </
    
    p
    
    >
   
   

按照规范中的说明，紧挨 DIV 元素的第一个 P 元素会被选中；里面的文本颜色应该被制置成红色。
IE6 IE7(Q) IE8(Q)中，P中的 “Aloha!” 文字颜色没有变化，依然是黑色，因此可以推断出，它们不支持相邻兄弟选择器。

属性选择器
简介
属性选择器有以下四种方式：

  * [att] : 选定设置了 att 属性的元素，不管设定的值是什么
  * [att=val] : 选定 att 属性的值设置为 val 的元素
  * [att~=val] : 表示一个元素拥有属性 att ，并且该属性含有空格分隔的一组值，其中之一为 'val'
  * [att|=val] : 表示一个元素拥有属性 att ，并且该属性不含val或以 'val' 开头，后面紧邻 '-' (U+002D)


选择拥有指定属性的元素。

IE6 IE7(Q) IE8(Q)不支持属性选择器

HTML code

   
   

    
    <
    
    style 
    
    type
    
    ="text/css"
    
    >
    
    
  p[id] 
    
    {
    
    
      color
    
    :
    
     red
    
    ;
    
    
  
    
    }
    
    

    
    </
    
    style
    
    >
    
    

    
    <
    
    p 
    
    id
    
    ="aloha"
    
    >
    
    Aloha!
    
    </
    
    p
    
    >
   
   

样式中使用了属性选择器 [att] : p[id]，所以根据标准，含有 'id' 属性的 P 元素将被选中；因此，P中的文字应该变成红色。
结果，在IE6 IE7(Q) IE8(Q)中，没有变色。

总结
从上面可以看出，IE从IE7开始，才对一些高级选择器提供的支持。因此对子选择器，普通兄弟选择器，相邻兄弟选择器和属性选择器的支持情况如下图：
所以，大家在遇到这几个选择器的时候，应该好好考虑一下IE6中的替代方案。

希望对大家有帮助！！

更多兼容性问题：【分享】浏览器兼容性问题目录

转自：http://topic.csdn.net/u/20100730/17/c708d399-f734-4200-aa3b-7c45c1df34ed.html