## 匹配DIV第一個兒子標簽
```
h1:first-child{
background: red;
}
<div>
<h1>我是一級標簽</h1>
<h1>我是二個一級標簽</h1>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h1>我是六級標簽</h1>
</div>
```
## 匹配DIV最后一個兒子標簽
```
h6:last-child{
background: red;
}
~~~
<div>
<h1>我是一級標簽</h1>
<h1>我是二個一級標簽</h1>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h6>我是六級標簽</h6>
<h6>我是六級標簽</h6>
</div>
```
## 匹配DIV第7個標簽
```
p:nth-child(7){
background: red;
}
<div>
<h1>我是一級標簽</h1>
<h1>我是二個一級標簽</h1>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h6>我是六級標簽</h6>
<h6>我是六級標簽</h6>
</div>
```
## 匹配DIV中h6標簽倒數第1個兒子
```
h6:nth-last-child(1){
background: red;
}
<div>
<h1>我是一級標簽</h1>
<h1>我是二個一級標簽</h1>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<h6>我是六級標簽</h6>
<h6>我是六級標簽</h6>
</div>
```
子類選擇器【不區分字類元素類型】：任意類型標簽都是父節點子元素。
選擇器：first-child：代表含義是匹配某一個父元素的第一個兒子標簽
選擇器:last-child,代表含義是匹配一個父元素的最后一個兒子標簽。
選擇nth-chid(索引值)，代表是匹配某一個父元素的索引值為幾的兒子標簽，索引值從1開始。
選擇器：nth-last-child（索引值），代表是匹配某一個父親元素索引值為幾的倒數兒子標簽
# 子類選擇器之區分子元素類型的
<br/>
<br/>
<br/>
概述：子類選擇器還有一種，區分元素類型的，所謂區分子元素類型：匹配某一個父元素內部某一類型的子節點而已。
語法規則：
基礎選擇器或者高級選擇器：子類型選擇器
<br/><br/><br/>
## 匹配某一個元素中，P標簽中第一個節點
```
p:first-of-type{
background: red;
}
<div>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<pre>保留格式標簽</pre>
</div>
```
## 匹配某一個元素中，P標簽中最后一個節點
```
p:last-of-type{
background: red;
}
<div>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<pre>保留格式標簽</pre>
</div>
```
## 匹配某一個標簽中，P標簽中第三個P標題
```
p:nth-of-type(3n){
background: red;
}
<div>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<pre>保留格式標簽</pre>
</div>
```
## 匹配某一個標簽中，倒數第1個P標簽
```
p:nth-last-of-type(1){
background: red;
}
<div>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<h1>我是一級標題</h1>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<p>我是一個段落標簽</p>
<pre>保留格式標簽</pre>
</div>
```
div:first-of-type:匹配的是某一個父元素內部div類型的第一個子節點
div:last-of-type:匹配的是某一個父元素內部div類型的最后一個子節點
div:nth-type(索引值)：匹配的是某一個父元素內部DIV類型的索引值為幾的子節點
div:nth-last-of-type(索引值)：匹配的是某一個父元素內部DIV類型的索引值為倒數第幾個節點
