0

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

有关示例，请参见我的小提琴或使用下面的代码。我用黄色突出显示了应该应用该样式的那些。

我正在寻找没有服务器端解决方案、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;
}   ​
4

1 回答 1

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;
}
于 2012-07-27T15:34:10.857 回答