CSS3 klasa pseudo nie pierwsze i ostatnie dziecko

Question

mam pewne następujący kod HTML:

<ul> 
    <li>number 1</li> 
    <li>number 2</li> 
    <li>number 3</li> 
    <li>number 4</li> 
    <li>number 5</li> 
    <li>number 6</li> 
    <li>number 7</li> 
    <li>number 8</li> 
    <li>number 9</li> 
    <li>number 10</li> 
</ul> 

Jak mogę użyć CSS3 pseudoklas dokonywać żadnych li element, który nie jest pierwszy lub ostatni mają background-color z tomato na przykład? Wygląda na to, że mogę użyć selektora :not.

Answer 1

dwa sposoby:

można ustawić regułę ogólną, a następnie zastąpić go :first-child i :last-child przedmiotów. Ta gra do mocnych CSS:

li { background: red; } 
li:first-child, li:last-child { background: white; } 

Lub można użyć :not słowa kluczowego połączeniu łącząc dwa:

li { background: white; } 
li:not(:first-child):not(:last-child) { background: red; } 

Z tych dwóch, ja osobiście wolę pierwsze - jest to łatwiejsze do zrozumienia i utrzymania (w mojej opinii).

Answer 2

Oto pióro http://codepen.io/vendruscolo/pen/AeHtG

Musisz połączyć dwa :not() klas pseudo:

li:not(:first-child):not(:last-child) { 
    background: red; 
} 

Oto MDN documentation: jak podano tam, to nie jest obsługiwane na IE < 9, podczas gdy jest dobrze osadzony na inne przeglądarki.

Jeśli potrzebujesz pomocy IE 8, musisz polegać na JavaScript lub użyć innej klasy, aby wskazać, który element jest ostatnim dzieckiem. W rzeczywistości IE 8 (i niższe) nie obsługuje pseudo klasy :last-child.