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僞類。