摘要：在網(wǎng)站開發(fā)中，尤其是對資訊網(wǎng)站中，通常需要做出熱門文章的列表，排名等等樣式，里面就會(huì)應(yīng)用到排序的從0-10等等數(shù)值，數(shù)值...
在網(wǎng)站開發(fā)中，尤其是對資訊網(wǎng)站中，通常需要做出熱門文章的列表，排名等等樣式，里面就會(huì)應(yīng)用到排序的從0-10等等數(shù)值，數(shù)值中，我們通常會(huì)對前三或是前五進(jìn)行特別的樣式調(diào)整。比如我們需要把第一個(gè)改成紅色的背景，把最后一個(gè)樣式下面加一個(gè)更多的按鈕 ，這樣我們都可以使用li偽類來對前端的樣式進(jìn)行調(diào)整。
尤其是在wordpress主題的開發(fā)中，在前端應(yīng)用很廣泛li的第一個(gè)及最后一個(gè)都可以進(jìn)行單獨(dú)的設(shè)置，甚至是li的奇偶數(shù)的，或是特定的某個(gè)位置都可以使用偽類來進(jìn)行設(shè)置，相當(dāng)于li的一個(gè)小跟班，只對某個(gè)li起作用。
|
1 2 3 4 5 6 |
第一個(gè)li的樣式：li:first-child { background:#f00; } 最后一個(gè)li的樣式：li:last-child { background:#000; } 第n個(gè)li的樣式：li:nth-child(n) { background:#000; } 倒數(shù)第二個(gè)li的樣式：nth-last-of-type(2){ background:#000; } 奇數(shù)列表：li:nth-child(odd) { background:#f00; } 偶數(shù)列表：li:nth-child(even) { background:#f00; } |
