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) 奇数偶数,同样可以这样处理。
时间: 2024-10-12 13:56:39