E:nth-child(n) { sRules }

• 要使該屬性生效，E元素必須是某個(gè)元素的子元素，E的父元素最高是body，即E可以是body的子元素
• 該選擇符允許使用一個(gè)乘法因子(n)來作為換算方式，比如我們想選中所有的偶數(shù)子元素E，那么選擇符可以寫成：E:nth-child(2n)
• 使用E:nth-child(n)實(shí)現(xiàn)奇偶：

  示例代碼：

  <style> li:nth-child(2n){color:#f00;} /* 偶數(shù) */ li:nth-child(2n+1){color:#000;} /* 奇數(shù) */ </style> <ul> <li>列表項(xiàng)一</li> <li>列表項(xiàng)二</li> <li>列表項(xiàng)三</li> <li>列表項(xiàng)四</li> </ul>

  因?yàn)?n)代表一個(gè)乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)換算出來會(huì)是偶數(shù)，而(2n+1)換算出來會(huì)是奇數(shù)

• 該選擇符允許使用一些關(guān)鍵字，比如：odd, even

  使用odd, even實(shí)現(xiàn)奇偶：

  <style> li:nth-child(even){color:#f00;} /* 偶數(shù) */ li:nth-child(odd){color:#000;} /* 奇數(shù) */ </style> <ul> <li>列表項(xiàng)一</li> <li>列表項(xiàng)二</li> <li>列表項(xiàng)三</li> <li>列表項(xiàng)四</li> </ul>

  關(guān)鍵字odd代表奇數(shù)，even代表偶數(shù)

• 有一點(diǎn)需要注意的是：

  HTML示例代碼：

  <div> <p>第1個(gè)p</p> <p>第2個(gè)p</p> <span>第1個(gè)span</span> <p>第3個(gè)p</p> <span>第2個(gè)span</span> <p>第4個(gè)p</p> <p>第5個(gè)p</p> </div>

  CSS Case 1：

  p:nth-child(2){color:#f00;}

  很明顯第2個(gè)p會(huì)被命中然后變成紅色

  CSS Case 2：

  p:nth-child(3){color:#f00;}

  這是會(huì)命中第3個(gè)p么？如果你這么認(rèn)為那就錯(cuò)了，這條選擇符就不會(huì)命中任何一個(gè)元素。

  CSS Case 3：

  p:nth-child(4){color:#f00;}

  這時(shí)你以為會(huì)命中第4個(gè)p，但其實(shí)命中的卻是第3個(gè)p，因?yàn)樗堑?個(gè)子元素

  E:nth-child(n)會(huì)選擇父元素的第n個(gè)子元素E，如果第n個(gè)子元素不是E，則是無效選擇符，但n會(huì)遞增。

  假設(shè)不確定第1個(gè)子元素是否為E，但是又想命中第1個(gè)E，應(yīng)該這樣寫：

  p:first-of-type{color:#f00;}

  或者這樣寫：

  p:nth-of-type(1){color:#f00;}

  參考 E:first-of-type 和 E:nth-of-type(n)

• 淺綠 = 支持
• 紅色 = 不支持
• 粉色 = 部分支持