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

示例演示

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

HTML代碼：

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

CSS代碼：

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

演示結(jié)果：