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颜色支持（虽然范围有限，但并不能完成所有功能）。