“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素。

示例演示：

通過“:first-of-type”選擇器，定位div容器中的第一個(gè)p元素（p不一定是容器中的第一個(gè)子元素），并設(shè)置其背景色為橙色。

HTML代碼：

<div class="wrapper">
  <div>我是一個(gè)塊元素，我是.wrapper的第一個(gè)子元素</div>
  <p>我是一個(gè)段落元素，我是不是.wrapper的第一個(gè)子元素，但是他的第一個(gè)段落元素</p>
  <p>我是一個(gè)段落元素</p>
  <div>我是一個(gè)塊元素</div>
</div>

CSS代碼：

.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改變第一個(gè)段落的背景為橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

演示結(jié)果：