E:nth-child(n)

語法:

E:nth-child(n) { sRules }

說明:

相符父元素的第n個子元素E,假設該子元素不是E,則選擇符無效。
  • 要使該屬性生效,E元素必須是某個元素的子元素,E的父元素最高是body,即E可以是body的子元素
  • 該選擇符允許使用一個乘法因子(n)來作為換算方式,比如我們想選中所有的偶數子元素E,那麼選擇符可以寫成:E:nth-child(2n)
  • 使用E:nth-child(n)實現奇偶:

    示例程式碼:

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

    因為(n)代表一個乘法因子,可以是0, 1, 2, 3, ..., 所以(2n)換算出來會是偶數,而(2n+1)換算出來會是奇數

  • 該選擇符允許使用一些關鍵字,比如:odd, even

    使用odd, even實現奇偶:

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

    關鍵字odd代表奇數,even代表偶數

  • 有一點需要注意的是:

    HTML示例程式碼:

    <div> <p>第1個p</p> <p>第2個p</p> <span>第1個span</span> <p>第3個p</p> <span>第2個span</span> <p>第4個p</p> <p>第5個p</p> </div>

    CSS Case 1:

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

    很明顯第2個p會被命中然後變成紅色

    CSS Case 2:

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

    這是會命中第3個p麼?如果你這麼認為那就錯了,這條選擇符就不會命中任何一個元素。

    CSS Case 3:

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

    這時你以為會命中第4個p,但其實命中的卻是第3個p,因為它是第4個子元素

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

    假設不確定第1個子元素是否為E,但是又想命中第1個E,應該這樣寫:

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

    或者這樣寫:

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

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

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0-8.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
IE9.0+

示例: