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) 奇數偶數，同樣可以這樣處理。