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文档:如上所述,它在IE <9上不受支持,而在其他浏览器上得到很好的支持.

如果您需要IE 8支持,则必须依赖Javascript或使用其他类来指示哪个元素是最后一个子元素.实际上,IE 8(及更低版本)不支持:last-child伪类.