伪类选择器nth-child

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岁,纯属举例子,加深理解。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容