CSS 第N個子元素樣式

螞蟻小編發表於2019-05-01
CSS
設定第N個子元素的樣式，首先就要匹配到第N個元素，下面通過程式碼例項介紹一下。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
li{
  list-style:none;
  height:30px;
  line-height:30px;
}
li:nth-child(2){
  color:red;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
</ul>
</body>
</html>

可以將第二個li元素的字型顏色設定為紅色。不過IE8和IE8以下瀏覽器不支援。

nth-child可以參閱CSS的偽類選擇符CSS E:nth-child(n)一章節。 

相關文章