Question

我有一组<li>元素，这些元素已对齐，因此它们形成两列。使用nth-last-child和nth-child(even) - 或任何其他选择器的组合 - 是否可以将样式应用于EITHER：a）最后两个（假设有相同数量的<li>＆＃39; s）或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;
}

最后，有时倒数第二

1 个答案: