nth-child 在元素很多的时候，用处很大，他可以定位父元素的第几个儿子。
div:nth-child(1)
这段代码，要选择的是在所有容器的第一个元素是div，如图：
在body这个容器里面 .parent 是第一个div，所以他被选中被附上了color：red，因为color会继承，所以.pratent下的所有元素都变红了。body里面的第二个div没有被选中，所以他没有变化。在来看另外一个容器.pratent他里面的第一个div也变成了红色。另外一个容器.pratent2,他相对于body来说是第二个div，没有变选中。但是.pratent里面的第1个div被选中了。
这种用法很危险，如果一个页面里面有很多结构差不多的容器，第一个元素都是div，那么就会出现误操作，把不想选择的也选中了。
.pratent :nth-child(1)
这个代码的意思是 ，选中class为pratent下的第一个元素，括号里面可以改数字，改成2，就是第二个儿子。
这种用法比上一种用法，安全一点，他明确了是哪个容器下的子元素。尼玛上一个就好比，我找我儿子，他叫李四，年纪12岁，那要有多少李四啊。第二种选发就很明确，我要找李四，他爸爸叫pratent，他今年12岁，纯属举例子，加深理解。
网友评论