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