CSS ie8的第一个孩子和最后一个孩子

Question

Hello guys i have the following..

.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;
}

it works perfect in ie9, chrome, opera, firefox... but in ie8 i get only the second background on every li element.

What is the problem? ie8 does not support first-child?

Answer 1

You have two issues here: Firstly the :last-child selector, and secondly the RGBA background colours.

1. IE8 does not support :last-child . (It does support :first-child though)

   You can see the browser support for these (and all other CSS selectors) at Quirksmode.org .

   The quickest and easiest way to deal with this if you need IE8 support is simply to add classes to the relevant elements and style them that way instead. It's the old-school way of doing things, but then IE8 is something of an old-school browser.

   If you really need to use selectors like :last-child , and you really need to support IE8, there are Javascript solutions you could try:

   • http://selectivizr.com/ -- this is a JS library that adds support for a bunch of CSS selectors to old IE versions. It requires you to also use another lib such as jQuery that it uses to do the hard work.

   • https://code.google.com/p/ie7-js/ -- this is a JS library that tries to patch old IE versions to fix as many of the bugs and quirks as possible and back-fill as many missing features as possible. It's pretty wide-ranging in what it does. It does include most of the advanced CSS features.

   Either of these libraries should do the trick for you to add :last-child support, unless you have users with JS turned off.

2. However as I said, IE8 does support :first-child , so missing selectors isn't the reason for your code not working in this case. The reason your CSS isn't working for :first-child is because you're using an RGBA colour for the background. IE8 doesn't support RGBA colours.

   For this, the only solution available is a JS library called CSS3Pie . This adds various CSS3 features to IE6/7/8, including RGBA colour support (albeit to a limited extent; it doesn't do everything).

Answer 2

IE8 and lower don't support those pseudo classes. There is a Javascript tool that makes IE7 and IE8 behave closer to IE9 and adds support for first and last childs.

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

In the downloaded file, you will find IE7.js IE8.js and IE9.js just use the IE9.js it includes the other two...

Answer 3

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