CSS IE8第一胎和最後孩子

好傢伙，我有以下..CSS IE8第一胎和最後孩子

.selected2:first-child{ 
    background: url(../img/css/first-selected.png) no-repeat !important; 
    background-position: center center !important; 
    box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important; 
} 
.selected2{ 
    background: url(../img/css/second-selected.png) no-repeat !important; 
    background-position: center center !important; 
    box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important; 
} 
.selected2:last-child{ 
    background: url(../img/css/third-selected.png) no-repeat !important; 
    background-position: center center !important; 
    box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important; 
}

它可以完美運行在IE9中，鉻，歌劇，火狐...但在IE8我只得到第二背景在每一個元素上。

什麼問題？ ie8不支持第一個孩子？

來源

2013-03-22 emcee22

問題是http://stackoverflow.com/questions/7938521/browser-support-for-css-first-child-and-last-child – 2013-03-22 15:16:55

的更好的答案會給這個網站http：// quirksmode。 org/css/selectors/ – 2013-03-22 15:17:12

http://caniuse.com/#feat=css-sel3 – Michael 2013-03-22 15:18:11

你有兩個問題在這裏：首先是:last-child選擇器，其次是RGBA背景顏色。

IE8不支持:last-child。（它確實支持:first-child）

您可以看到瀏覽器對這些（以及所有其他CSS選擇器）的支持at Quirksmode.org。

如果您需要IE8支持，處理此問題的最快和最簡單的方法是簡單地將類添加到相關元素中，然後改爲使用這種方式。這是老式的做事方式，但IE8是老派的瀏覽器。

如果你真的需要使用像選擇:last-child，你真的需要支持IE8，也有使用Javascript解決方案，您可以嘗試：
- http://selectivizr.com/ - 這是一個JS庫，增加了一個支持一堆CSS選擇器到舊的IE版本。它需要你使用另一個lib，比如jQuery，它使用它來完成艱苦的工作。
- https://code.google.com/p/ie7-js/ - 這是一個JS庫，它試圖修補舊的IE版本，儘可能多地修復錯誤和怪癖，並回填儘可能多的缺失功能。它的功能非常廣泛。它確實包含了大部分高級CSS功能。
無論這些庫應該做的伎倆爲你增添:last-child支持，除非你有用戶使用JS關閉。
但正如我所說的，IE8確實支持:first-child，所以在這種情況下丟失的選擇器不是您的代碼無法工作的原因。你的CSS不適用於:first-child的原因是因爲你使用RGBA顏色作爲背景。 IE8不支持RGBA顏色。

爲此，唯一可用的解決方案是名爲CSS3Pie的JS庫。這爲IE6/7/8添加了各種CSS3功能，包括RGBA顏色支持（雖然範圍有限，但並不能完成所有功能）。