Question

我的ul内有7 li。我知道我可以设置第一个和最后一个li的样式，但是可以设置最后3个li的样式，以便文本是不同的颜色吗？这是我第一次遇到这个问题/困境。我已经google了一下，并没有找到真正帮助我的东西。

<div class="international-portfolio">
<div class="international-portfolio-title"> Sales Representation International</div>
<ul class="nobullet inline int-portfolio ">
<li class="excelsior-hotel-ernst first">
<li class="le-mas-candille">
<li class="mandarin-oriental-hotel-group-worldwide">
<li class="victoria-jungfrau-grand-hotel-spa">
<li class="palace-luzern">
<li class="eden-au-lac">
<li class="bellevue-palace last">
</ul>
</div>

我更新了编码 - 尝试了解决方案，但目前还没有工作，但会坚持下去。

Answer 1

这应该可以解决问题（但请注意，它不适用于旧版本的IE）： http://reference.sitepoint.com/css/pseudoclass-nthlastchild

使用css选择器，如下所示：

li:nth-last-child(-n+3) {
  /*stuff here*/
}

以下是一个例子： http://jsfiddle.net/yAUwb/

Answer 2

您可以使用：

li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
  color: red;
}

Answer 3

这段代码有可能

.myList li:nth-last-child(1),
.myList li:nth-last-child(2),
.myList li:nth-last-child(3)
{
    color: red;
}

演示：http://jsfiddle.net/2np58/

CSS - 样式ul的最后3 li

3 个答案: