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元件，它不是第一个或最后一个有tomato的background-color例如？看来我可以使用: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伪类。