first-of-type選擇器
類似於“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。
通過“:first-of-type”選擇器，定位div容器中的第一個p元素（p不一定是容器中的第一個子元素），並設置其背景色爲橙色。
HTML代碼：
<div> <div>我是一個塊元素，我是.wrapper的第一個子元素</div> <p>我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素</p> <p>我是一個段落元素</p> <div>我是一個塊元素</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;
}
/*我要改變第一個段落的背景爲橙色*/
.wrapper > p:first-of-type {
background: orange;
}演示結果：
