E:nth-last-of-type(n)

語法:

E:nth-last-of-type(n) { sRules }

說明:

相符父元素的倒數第n個子元素E。

需要注意3個要點:

  • 首先,因為相符的是父元素的子元素,這意味著E元素必須作為某個元素的子元素存在(E元素的父元素最高是html,也就是說E元素最高是body,這表示任何非html的元素都符合這個約束,因為html元素是根元素。)
  • 其次,相符的是父元素的倒數第n個為E的子元素(被命中的不一定是倒數第n個子元素,因為相符的不是倒數第n個子元素,而是倒數第n個為E的子元素)

    來看下面這個例子:

    HTML示例程式碼:

    <div class="demo"> <p>p1</p> <p>p2</p> <span>span1</span> <p>p3</p> <span>span2</span> </div>

    如上HTML,要命中倒數第1個p元素,程式碼如下:

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

    此時p3會被命中,雖然p3是 .demo 的倒數第2個子元素,但卻是倒數第1個為p的子元素

  • 再次,只能相符與E元素同級的元素,即:E元素的兄弟元素

    來看下面這個例子:

    HTML示例程式碼:

    <div class="demo"> <span>span1</span> <p> <span>span2</span> <span>span3</span> </p> <span>span4</span> </div>

    如上HTML,你將不能通過下面的程式碼命中span3:

    .demo span:nth-last-of-type(2) { color: #f00; }

    因為span3並不是.demo的倒數第二個span子元素,而是p的倒數第一個span子元素,上述選擇符最終命中的會是span1和span2

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
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+

示例: