E:nth-of-type(n)

語法:

E:nth-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,假設要命中第3個p元素,程式碼如下:

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

    可以看到此時 .demo 的第4個子元素會被命中,因為 .demo 的第4個子元素才是它的第3個p子元素

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

    來看下面這個例子:

    HTML示例程式碼:

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

    如上HTML,如果我想相符其中的第2個span,程式碼如下:

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

    結果span2確實沒有被命中,因為span2並不是.demo的第2個span子元素。從程式碼中能看到span1和span4是同級,span2和span3同級,因為span3和span4分別是這2組層級中的第2個span,所以最終span3和span4都被命中了。

兼容性:

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

示例: