## 匹配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类型的索引值为倒数第几个节点
