最后和有时倒数第二个

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; 
}