CSS基础----结构伪类选择器

个人理解，结构伪类选择器可以说是层次选择器的升级版，所以在前面层次选择器的基础上，理解起来就比较简单了

语法和功能如下：

测试代码

/*ul的第一个子元素*/
ul li:first-child{
	background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
	background: green;
}

li1和li3很显然，分别是ul的first child和last child，所以分别是红色和绿色

---

p:nth-child(1){
		background: yellow;
}

p:nth-child(1)是选择父元素（这里是body）下的第1个子元素，也就是p1,所以p1是黄色
从这里我们知道，最上面的两段也可以写成下面的形式

ul li:nth-child(1){
	background: red;
}
ul li:nth-child(3){
	background: green;
}

---

p:nth-of-type(2)是选择父元素（body）下的第2个类型为p的元素，和上面的区别就是指定了要选择的元素类型

p:nth-of-type(2){
	background: blue;
}

nth-of-type和nth-child的区别详解可以参考：https://www.cnblogs.com/pssp/p/5991029.html