通過CSS選擇器選擇在所有的HTML標籤的第一個和最後一次出現

Question

我有這樣的HTML標籤

<div> 
    <ol> 
    <li>First</li> 
    <li>Foo</li> 
    <li>Foo</li> 
    <li>Foo</li> 
    </ol> 
</div> 
<div> 
    <ol> 
    <li>Foo</li> 
    <li>Foo</li> 
    <li>Foo</li> 
    <li>Last</li> 
    </ol> 
</div> 

我想改變第一李在html標籤的背景和過去裏所有。我怎樣才能做到這一點？

我用這個的CS這是行不通的，因爲我預料

li:first-child { 
    background: #900 
} 

li:last-child { 
    background: #900 
} 

P.S我所需要的解決方案適用於IE8 +。

jsfiddle

Answer 1

考慮到IE8的支持，一個jQuery的解決辦法是最好的IMO：

http://codepen.io/anon/pen/wMBxYO

$(document).ready(function() { 
    $('ol:first li:first, ol:last li:last').css('background', 'pink'); 
}); 

Answer 2

假設你的HTML結構不會改變，你可以這樣做：

div:first-child li:first-child { 
    background: #900;} 

div:last-child li:last-child { 
    background: #900;}