CSS中的结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素， 常用于根据父级选择器里面的子元素。合理使用结构伪类选择器，可以节省类名的定义，减少代码量。
结构伪类选择器的用法选择符简介
E:first-child
匹配父元素中的第一个子元素E
E:last-child
匹配父元素中最后一个E元素
E:nth-child(n)
匹配父元素中的第n个子元素E
E:first-of-type
指定类型E的第一个
E:last-of-type
指定类型E的最后一个
E:nth-of-type(n)
指定类型E的第n个
选择器中n值公式取值
2n
偶数
2n+1
奇数
5n
5 1015 ...
n+5
从第5个开始(包含第五个)到最后
-n+5
前5个(包含第5个)...
用法详解
直入主题，我们将常用的结构伪类选择器分为两类：
选择同类型兄弟元素
这两者的区别主要在于：前者是对父元素里面的所有孩子进行排序选择（序号固定），先找到第n个孩子，再看是否与该元素类型匹配；后者是对父元素里面指定的子元素（同类型）进行排序选择，先去匹配元素类型，再根据元素找第n个孩子
下面举个例子。
假设盒子结构如下：
第一个div
第一个p
第二个div
第一个h3
第二个p
第二个h3
这里，我要去找第一个div和第二个div。先直接使用:first-child和:last-child,看看能否正常选中。
.father div:first-child {
background-color: red;
}
.father div:last-child {
background-color: yellow;
}
结果并不能找到第二个div，我们放弃:last-child写法，使用:nth-child(3)来看能否选中。
.father div:first-child {
background-color: red;
}
.father div:nth-child(3) {
background-color: aqua;
}
正确找到了第二个div。那么为什么:last-child写法找不到css常用选择器 CSS结构伪类选择器常规以及另类用法，使用:nth-child(3)就能正确找到了呢？
原因如下：
我们在看上文的第二句话就好理解了：“选择前对父元素里面指定的子元素（同类型）进行排序选择，先去匹配元素类型，再根据元素找第n个孩子”。
因此，对于刚刚的情形，我们可以直接使用:first-of-type和:last-of-type或者:nth-of-type(1)和:nth-of-type(2)更直观的选择第一个div和第二个div。
.father div:first-of-type {
background-color: blue;
}
.father div:last-of-type {
background-color: green;
}
总结：当父元素里面的子元素类型统一时，:nth-child(n)和:nth-of-type(n)效果上没有区别，推荐使用前者；当父元素里面的子元素类型不统一时，使用:nth-of-type(n)。
不常用用法补充
除去直接写标签名+伪类选择器的形式，还可以使用类名+伪类选择器。这种方法不常用，但也存在，某种程度上不太好理解，特在此补充，供大家参考。
p-banner
div-item
div-title
div-banner1
div-banner2
p-banner1
p-banner2
.banner:first-of-type {
background-color: aqua;
}
.banner:last-of-type {
background-color: blue;
}
首先css常用选择器，在选择前会进行分类，p标签为一类，div标签为一类，随后分别进行排序，序号独自计算。
对于.:first-of-type：p-是p标签一类的第一个元素并且类名匹配css常用选择器，因此会天蓝色高亮；div标签的第一个元素类名为item，不与匹配，因此不会被选中，因而只有p-高亮。
对于.:last-of-type：原理与上面类似，会选择两类标签排序最后的一个元素，并且他们的类名也匹配，因此div-和p-变成蓝色高亮。