:nth-of-type()

版本：CSS3

:nth-of-type()这个 CSS 伪类，是针对具有一组兄弟节点的标签，用 n 来筛选出在一组兄弟节点的位置。

语法:

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

:nth-of-type()伪类指定一个实际参数，这个参数使用一种模式来匹配哪些元素应该被选中。
:nth-of-type()这个CSS 伪类匹配文档树中在其之前具有an+b-1个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式an+b匹配的相同元素。
E元素是某个元素的子元素，E的父元素最高是<html>，即E可以是<html>的子元素，也就是说E可以是<body>
该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

:nth-of-type()与:nth-child()

<p>第1个p</p>
<p>第2个p</p>
<span>第1个span</sapn>
<p>第3个p</p>
<span>第2个span</sapn>

如上HTML，假设要命中第一个span

使用:nth-of-type()span:nth-of-type(1){color:#f00;}。如果使用:nth-child()span:nth-child(3){color:#f00;}

浏览器支持


IE9+以及新版浏览器都支持`:nth-of-type()`

示例

//HTML

<div>
  <div>这段不参与计数。</div>
  <p>这是第一段。</p>
  <p>这是第二段。</p>
  <div>这段不参与计数。</div>
  <p>这是第三段。</p>
  <p>这是第四段。</p>
</div>

//CSS

/* 奇数段 */
p:nth-of-type(2n+1) {
  color: red;
}

/* 偶数段 */
p:nth-of-type(2n) {
  color: blue;
}

/* 第一段 */
p:nth-of-type(1) {
  font-weight: bold;
}

<style>
p:nth-last-of-type(2)
{
background:pink;
}
</style>


<h3>元素1</h3>
<p>元素2</p>
<p>元素3</p>
<p>元素4</p>

元素1

元素2

元素3

元素4