【css】相容IE8及IE8以下偽類選擇器
阿新 • • 發佈：2019-02-20
前言：css偽類選擇器很好用，讓我們的工作變的更方便。但有個麻煩，IE8及IE8以下對很多偽類選擇器並不相容。
這13個偽類選擇器是比較長用到的：
這時會發現，IE9對這些偽類選擇器都能相容。IE8、IE7對 :first-child，:hover是相容的，IE8對：focus是相容的，而其他IE7,IE8並不相容。
一、css相容
<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上進行相容：
<body> <style> div p:first-child+p { color:blue; } </style> <div> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> </div> </body>
這時就可以在IE7，IE8上進行相容了
同樣的，如果是要讓第三p標籤color變藍色，可以這樣寫
<body> <style> div p:first-child+p+p { color:blue; } </style> <div> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> <p>aaaa</p> </div> </body>
二、通過jquery相容(這裡的jquery要用2.0.0以下的，不然會報錯)
①讓第二個p標籤變藍色的話，可以用jquery獲取到第二個p元素標籤
if (navigator.appName === 'Microsoft Internet Explorer') { //判斷是否是IE瀏覽器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 7.0/i)) { //判斷是否是IE7
$('p:nth-child(2)').css('color','blue');
//$('p:nth-of-type(2)').css('color','blue');
}else if(navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)){ //判斷是否是IE8
$('p:nth-child(2)').css('color','blue');
//$('p:nth-of-type(2)').css('color','blue');
}
}②如果是讓第二個，第四個p標籤變藍色的話
if (navigator.appName === 'Microsoft Internet Explorer') { //判斷是否是IE瀏覽器
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 7.0/i)) { //判斷是否是IE7
$('p:nth-child(2n)').css('color','blue');
//$('p:nth-of-type(2n)').css('color','blue');
}else if(navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)){ //判斷是否是IE8
$('p:nth-child(2n)').css('color','blue');
//$('p:nth-of-type(2n)').css('color','blue');
}
}以此類推，以上所有的偽元素標籤都可以通過該方法進行相容
三、tip
<body>
<style>
div p:first-child { color:blue; }
div .active { color:red; }
</style>
<div>
<p class="active">aaaa</p>
<p >aaaa</p>
<p>aaaa</p>
<p>aaaa</p>
</div>
</body>執行程式碼發現，第一個p標籤還是紅色的，說明:偽類選擇器的優先順序比class選擇器的優先順序還要高。