E:nth-of-type(n)

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

需要注意3個(gè)要點(diǎn)：

• 首先，因?yàn)槠ヅ涞氖歉冈氐淖釉兀@意味著E元素必須作為某個(gè)元素的子元素存在（E元素的父元素最高是html，也就是說(shuō)E元素最高是body，這表示任何非html的元素都符合這個(gè)約束，因?yàn)閔tml元素是根元素。）

• 其次，匹配的是父元素的第n個(gè)為E的子元素（被命中的不一定是第n個(gè)子元素，因?yàn)槠ヅ涞牟皇堑趎個(gè)子元素，而是第n個(gè)為E的子元素）

  來(lái)看下面這個(gè)例子：

  HTML示例代碼：

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

  如上HTML，假設(shè)要命中第3個(gè)p元素，代碼如下：

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

  可以看到此時(shí) .demo 的第4個(gè)子元素會(huì)被命中，因?yàn)?.demo 的第4個(gè)子元素才是它的第3個(gè)p子元素

• 再次，只能匹配與E元素同級(jí)的元素，即：E元素的兄弟元素

  來(lái)看下面這個(gè)例子：

  HTML示例代碼：

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

  如上HTML，如果我想匹配其中的第2個(gè)span，代碼如下：

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

  結(jié)果span2確實(shí)沒(méi)有被命中，因?yàn)閟pan2并不是.demo的第2個(gè)span子元素。從代碼中能看到span1和span4是同級(jí)，span2和span3同級(jí)，因?yàn)閟pan3和span4分別是這2組層級(jí)中的第2個(gè)span，所以最終span3和span4都被命中了。

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