CSS - 樣式ul的最後3裏

我有一個ul其中有7 li裏面。我知道我可以對第一個和最後一個li進行樣式設計，但是最後3個li的樣式是否可以設計，以便文本是不同的顏色？這是我第一次遇到這個問題/困境。我搜索了一下，並沒有發現很多真正幫助我的東西。CSS - 樣式ul的最後3裏

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

ive更新了編碼 - 嘗試給出的解決方案，但目前沒有工作，但將保持在它。

來源

2011-12-13 MJCoder

找僞類：第n個孩子 - 但是這CSS3，所以沒有統一的瀏覽器支持尚未 – ptriek

似乎在所有得到支持主要的瀏覽器，除IE外：http://www.quirksmode.org/css/contents.html#t39 –

這應該做的伎倆（但你要知道，它不會工作在舊版本的IE）： http://reference.sitepoint.com/css/pseudoclass-nthlastchild

如下使用的CSS選擇器：

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

下面是一個例子，太： http://jsfiddle.net/yAUwb/

來源

2011-12-13 15:41:20 Romanulus

不錯！（你的小提琴使用-n + 3，而不是-n + 4。） –

@Romanulus它不能在IE8和IE7中工作，但在IE9中工作 – MJCoder

你真的很關注它;但是，在進入JavaScript之後，您將無法通過較小的瀏覽器純粹通過CSS將其關閉。至少我想。 – Romanulus

您可以使用：

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

來源

2011-12-13 15:45:30

只有一個冒號。 – BoltClock

已更新。謝謝BoltClock。 –

羅羅答案更聰明。 –

這是有點可能與此代碼

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

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

來源

2011-12-13 15:46:47

CSS - 樣式ul的最後3裏

回答

相關問題