CSS3 псевдо класс не первый и последний ребенок

Question

Я немного следующий 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> 

Как я могу использовать CSS3 псевдо-классы, чтобы любой li элемент, который не является первым или последним иметь background-color из tomato например? Кажется, я мог бы использовать селектор :not.

Answer 1

Два способа:

вы можете установить общие правила, а затем переопределить его :first-child и :last-child пунктов. Это играет в CSS сильные:

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

Или, вы можете использовать :not ключевое слово в сочетании комбинируя два:

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

Из двух, я лично предпочитаю первое - это легче понять и поддерживать (по моему мнению).

Answer 2

Вот ручка http://codepen.io/vendruscolo/pen/AeHtG

Вы должны объединить два :not() псевдо классы:

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

Вот MDN documentation: как указано там, это не поддерживается IE < 9, в то время как это хорошо поддерживается другие браузеры.

Если вам нужна поддержка IE 8, вам нужно полагаться на Javascript или использовать другой класс, чтобы указать, какой элемент является последним. На самом деле IE 8 (и ниже) не поддерживает псевдокласс класса :last-child.