CSS 倒數第n個li元素樣式
可能在一個列表中根據某些規則單獨設定其中一項的樣式。
比如設定倒數第三個li元素的字型顏色為綠色。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul li{ list-style:none; font-size:12px; line-height:25px; border-bottom:1px dotted green; } ul li:nth-last-child(2){ color:green } </style> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> <li>本站網址是www.softwhy.com</li> </ul> </body> </html>
上述程式碼可以設定倒數第二li元素的字型顏色為綠色。
程式碼執行效果截圖如下:
還有很多相關類似操作,考慮到篇幅問題,具體可以參閱如下幾篇文章:
(1).:nth-last-child()參閱CSS E:nth-last-child()選擇器一章節。
(2).設定從n個開始的樣式參閱CSS 第n個開始 li 元素樣式一章節。
(3).設定指定範圍樣式參閱CSS 指定範圍樣式一章節。
(4).設定倒數第n個li元素樣式參閱CSS 設定前n個li元素樣式一章節。
(5).設定第n個li元素樣式參閱CSS 第n個li元素樣式一章節。
相關文章
- CSS設定第n個li元素樣式CSS
- CSS 設定第n個li元素樣式CSS
- CSS 第2個li元素樣式CSS
- CSS 設定從第n個開始li元素樣式CSS
- css如何匹配倒數第n個元素CSS
- CSS 設定前n個li元素樣式CSS
- CSS 第N個子元素樣式CSS
- CSS 倒數第二個li元素CSS
- css設定第2個li元素的樣式CSS
- css匹配第n個li元素CSS
- JavaScript 獲取第n個li元素JavaScript
- jQuery查詢第n個li元素jQuery
- jquery獲取指定li元素後面的第n個li元素jQuery
- CSS 定義第二個li元素樣式CSS
- css數第二個li元素CSS
- JavaScript 獲取倒數第二個li元素JavaScript
- JavaScript獲取倒數第二個li元素JavaScript
- css匹配第n個li元素程式碼例項CSS
- CSS 設定指定範圍li元素樣式CSS
- CSS匹配指定li元素並設定樣式CSS
- L1-050 倒數第N個字串 (15分)字串
- CSS 匹配第一個li元素CSS
- 獲取倒數第幾個元素程式碼例項
- jQuery點選的是第幾個li元素jQuery
- CSS的ul與li樣式學習CSS
- jquery刪除前n個li元素程式碼例項jQuery
- css 獲取從第n個開始,之後的所有元素CSS
- jquery實現的倒數獲取li元素簡單介紹jQuery
- JavaScript獲取當前li元素是第幾個JavaScript
- jQuery在元素集合中獲取第N個元素jQuery
- CSS 文字li元素中垂直居中CSS
- css匹配指定索引的li元素CSS索引
- CSS 設定svg元素樣式CSSSVG
- jquery如何獲取li元素的前n個程式碼例項jQuery
- CSS匹配第一個li元素程式碼例項CSS
- css匹配最後一個li元素程式碼例項CSS
- 獲取陣列第N個元素的方法陣列
- css多列li元素水平居中效果CSS