css后代选择器兼容IE8及IE8以下

css后代选择器很好用，让我们的工作变的更方便。但有个麻烦，IE8及IE8以下对很多后代选择器并不兼容。

这六个后代选择器是比较长用到的：

 

这时会发现，IE9对这些后代选择器都兼容。IE8、IE7除了的 :first-child 是兼容的，其他五个都不兼容。

 

兼容：

 

<body>
     <div>
           <p>aaaa</p>
           <p>aaaa</p>
           <p>aaaa</p>
           <p>aaaa</p>
     </div>        
</body>

 

 一、让第2个p元素变成“蓝色”字体.

一般是这样写  div p:nth-child(2) { color:blue; }

或者  div p:nth-of-type(2) { color:blue; }

或者  就是给第2个p元素加上class了。

 

要在IE7，IE8上进行兼容：

第一种方法： div>p:first-child+p  { color:blue; }

第二种方法是用Jquery：

if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器
   if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { 
          $('p:nth-child(2)').css('color','blue');
        //$('p:nth-of-type(2)').css('color','blue');
   }
}

 

 一、让第2个,第4个p元素变成“蓝色”字体.

一般是这样写  div p:nth-child(2n) { color:blue; }

或者  div p:nth-of-type(2n) { color:blue; }

要在IE7，IE8上进行兼容：df sasda

 

if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器
   if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { 
          $('p:nth-child(2n)').css('color','blue');
        //$('p:nth-of-type(2n)').css('color','blue');
   }
}

 

 

:nth-child(odd)，:nth-child(odd) 奇数偶数，同样可以这样处理。

 

posted @ 2017-12-05 11:50  U炒饭  阅读(3030)  评论(0)    收藏  举报