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+

示例：