css ie8 第一个孩子和最后一个孩子

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 背景颜色。

1. IE8 不支持:last-child。 （虽然它确实支持:first-child）

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

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

   如果您确实需要使用:last-child 之类的选择器，并且确实需要支持 IE8，那么您可以尝试使用 Javascript 解决方案：

   • http://selectivizr.com/ -- 这是一个 JS 库，它为旧的 IE 版本添加了对一堆 CSS 选择器的支持。它还要求您使用另一个库，例如 jQuery，它用于完成繁重的工作。

   • https://code.google.com/p/ie7-js/ -- 这是一个 JS 库，它试图修补旧的 IE 版本，以尽可能多地修复错误和怪癖，并尽可能多地回填缺失的功能。它的作用范围很广。它确实包含大多数高级 CSS 功能。

   这些库中的任何一个都应该可以为您添加 :last-child 支持，除非您的用户关闭了 JS。

2. 不过，正如我所说，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 等来定位您需要的类。