结构伪类选择器细分:nth-child()/:nth-of-type()

相信不少刚学前端的同学在这部分容易混淆，今天我们就来区分下用法。

基本结构如下

---

相信同学们都知道结果

---

在这里可能认为第一个盒子变成红色，然而结果是什么效果都没有

---

我们换个写法

没错，结果就和你想想的一样

---

有的同学在这就开始混乱困惑了，然而这才刚刚开始

...................我相信到这里同学们头都大了，同学们不妨自己试一试，看看结果是不是如同自己想的一样

😵

---

方法总结 （这里的*表示选择器，如id，class，div...）

.box *:nth-child{ n }

该选择器选取父元素box的第 n 个子元素，与类型有关，类型匹配则生效，不匹配则不生效。

.box :nth-child{ n }

该选择器选取父元素box的第 n 个子元素，与类型无关。

.box *:nth-of-type(n)

选择器匹配子元素*的第n个元素。

.box :nth-of-type(n)

选择器匹配属于父元素的相同的第 n个子元素的每个元素,如果子元素有多重不同的类型，则会匹配每种类型的第n个元素

同学们多多练习就会理解其中的区别了。