E:nth-last-child(n)

語法:

E:nth-last-child(n) { sRules }

說明:

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

    HTML示例程式碼:

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

    如上HTML,假設要命中倒數第一個p(即正數第3個p),那麼CSS選擇符應該是:

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

    而不是:

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

    因為倒數第1個p,其實是倒數第2個子元素。基於選擇符從右到左解析,首先要找到第1個子元素,然後再去檢查該子元素是否為p,如果不是p,則n遞增,繼續查找

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

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

    或者這樣寫:

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

    參考 E:last-of-typeE:nth-last-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+

示例: