最後和有時倒數第二個

Question

我有一個集合<li>元素被對齊，以便它們形成兩列。使用nth-last-child和nth-child(even)的組合或任何其他選擇器可以將樣式應用於以下任何一個：a）最後兩個（假設存在相同數量的<li>）或b）僅最後一個（假設是奇數<li>'s）

查看my fiddle爲例或使用下面的代碼。我用黃色突出顯示了應該應用的風格。

我在找沒有服務器端的解決方案，html的修改，也沒有Javascript，我很想知道它是否可以完全用CSS來完成。瀏覽器的兼容性並不是CSS3的問題。

代碼

HTML

<ul> 
<li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li style="background: yellow">Hello World</li><!-- 
--><li style="background: yellow">Hello World</li> 
</ul> 

<br /> 

<ul> 
<li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li>Hello World</li><!-- 
--><li style="background: yellow">Hello World</li> 
</ul>​ 

CSS

ul { 
    padding: 10px; 
    width: 400px; 
    background: red; 
} 

li { 
    width: 200px; 
    display: inline-block; 
    background: blue; 
} ​ 

Answer 1

試試這個 - http://jsfiddle.net/HFn9Q/4/

/* set the last 2 items bg to yellow */ 
li:nth-last-child(2) { 
    background: yellow; 
} 

/* clean the pre-last item bg in case of odd <li> number */ 
li:nth-child(even) { 
    background: blue; 
} 

/* explicitly set the very last item bg to yellow for even <li> number, otherwise the previous rule will give it a blue bg */  
li:last-child { 
    background: yellow; 
}