css - 最后，有时倒数第二

Question

我收藏了 <li>对齐的元素，以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设 <li> 的数量相同)或 b)仅最后一个(假设奇数个) <li> 的)

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