Question

大家好，我有以下内容..

.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，chrome，opera，firefox中完美运行......但在ie8中，我只获得每个li元素的第二个背景。

有什么问题？ ie8不支持第一个孩子？

Answer 1

这里有两个问题：首先是:last-child选择器，其次是RGBA背景颜色。

IE8不支持:last-child。（它确实支持:first-child）

您可以看到浏览器支持这些（以及所有其他CSS选择器）at Quirksmode.org。

如果您需要IE8支持，处理此问题的最快捷，最简单的方法就是将类添加到相关元素中，并以相应方式设置样式。这是老式的做事方式，但IE8是老式的浏览器。

如果你真的需要使用像:last-child这样的选择器，并且你真的需要支持IE8，那么你可以尝试使用Javascript解决方案：
- http://selectivizr.com/ - 这是一个JS库，它为旧的IE版本添加了对一堆CSS选择器的支持。它还要求你使用另一个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颜色支持（尽管程度有限;但并不能完成所有工作）。

Answer 2

IE8及更低版本不支持这些伪类。有一个Javascript工具，使IE7和IE8更接近IE9，并增加了对第一个和最后一个孩子的支持。

https://code.google.com/p/ie7-js/

在下载的文件中，你会发现IE7.js IE8.js和IE9.js只使用IE9.js它包含了另外两个......

Answer 3

如前所述，您不能使用:last-child伪类，但您可以.selected2 + .selected2等来定位您需要的伪类。

css ie8 first-child＆amp;最后一个孩子

3 个答案: