“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計(jì)算父元素中指定的某種類型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類型的子元素時(shí)，使用“:nth-of-type(n)”選擇器來(lái)定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達(dá)式，還可以是關(guān)鍵詞。

示例演示

通過(guò)“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數(shù)段數(shù)的背景設(shè)置為橙色。

HTML代碼：

<div class="wrapper">
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落元素</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
  <div>我是一個(gè)Div元素</div>
  <p>我是一個(gè)段落</p>
</div>

CSS代碼：

.wrapper > p:nth-of-type(2n){
  background: orange;
}

演示結(jié)果：