Using :nth-child and :nth-last-child simultaneously

问题

I can't make :nth-child and :nth-last-child pseudo-classes work simultaneously.

Works well (highlights first 3 elements):

#a li:nth-child(-n+3) {
   background: #fbfcc8; 
}

Works well (highlights last 3 elements):

#b li:nth-last-child(-n+3) {
   background: #fbfcc8; 
}

Doesn't work (highlights first 3 elements and last one):

#c li:nth-child(-n+3), #c li:nth-last-child(-n+3) {
   background: #fbfcc8; 
}

http://jsfiddle.net/8GSQ6/2/

Update:

In real I have more complicated HTML, so seems like it's just a bug.

回答1:

Try this:

    #c1 li:nth-child(-n+3), #c1 li:nth-last-child(-n+3) {
       background: #fbfcc8; 
    }

This works for me..

Change id to c1.

回答2:

It's just a bug in Google Chrome 31.0.1650.57 for Mac. Firefox, Safari and latest Google Chrome works well.

来源：https://stackoverflow.com/questions/20346681/using-nth-child-and-nth-last-child-simultaneously