CSS設定第n個li元素樣式

antzone發表於2018-07-16
CSS

本章節介紹一下如何實現匹配li元素中第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;
}
ul li:nth-child(2){
  color:green;
} 
</style>
</head>
<body>
<ul>
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</li>
  <li>沒有人一開始就是高手，必須要通過虛心學習。</li>
  <li>每一天都是新的，要好好珍惜。</li>
  <li>只有當下的時間才是真實的，下一秒都是虛幻的。</li>
  <li>分享的精神和互助的胸懷是進步的最大源動力。</li>
</ul>
</body>
</html>

以上程式碼可以將第二個li元素中的字型顏色設定為綠色。

關於:nth-child選擇器參閱CSS E:nth-child(n)一章節。

相關文章