nth-child 在元素很多的時(shí)候，用處很大，他可以定位父元素的第幾個(gè)兒子。

div:nth-child(1)

這段代碼，要選擇的是在所有容器的第一個(gè)元素是div，如圖：

在body這個(gè)容器里面 .parent 是第一個(gè)div，所以他被選中被附上了color：red，因?yàn)閏olor會(huì)繼承，所以.pratent下的所有元素都變紅了。body里面的第二個(gè)div沒(méi)有被選中，所以他沒(méi)有變化。在來(lái)看另外一個(gè)容器.pratent他里面的第一個(gè)div也變成了紅色。另外一個(gè)容器.pratent2,他相對(duì)于body來(lái)說(shuō)是第二個(gè)div，沒(méi)有變選中。但是.pratent里面的第1個(gè)div被選中了。

這種用法很危險(xiǎn)，如果一個(gè)頁(yè)面里面有很多結(jié)構(gòu)差不多的容器，第一個(gè)元素都是div，那么就會(huì)出現(xiàn)誤操作，把不想選擇的也選中了。

.pratent :nth-child(1)

這個(gè)代碼的意思是 ，選中class為pratent下的第一個(gè)元素，括號(hào)里面可以改數(shù)字，改成2，就是第二個(gè)兒子。

這種用法比上一種用法，安全一點(diǎn)，他明確了是哪個(gè)容器下的子元素。尼瑪上一個(gè)就好比，我找我兒子，他叫李四，年紀(jì)12歲，那要有多少李四啊。第二種選發(fā)就很明確，我要找李四，他爸爸叫pratent，他今年12歲，純屬舉例子，加深理解。