几张图浅理解（会用） :nth-child()

最近发现了一个在项目中经常用到的，很有用虽然刚刚开始用的不太顺手但是而后却觉得真香的CSS属性，那便是 nth-child ！

直接步入主题，首先要真正理解怎么用，才会用

nth-child 有什么用 、怎么用 ?

在style中书写这个CSS属性时通常用于赋予某些特定位置的元素样式，那么具体是怎样的，可以结合例子和图示，一起来看看！

例子：

div:nth-child(1) 【表示所有同属层级下的第1个且为div标签的元素】

1、首先要明白，特定位置不一定只会有一个，比如上面这个例子，这个需求下就会出现很多个满足条件的div，所以需要根据具体需求使用，接下来看图

2、“同属层级下”，这个表示的是下图解释

 3、“第1个”，这个具体看下图表示，此时代表的是绿色箭头指向2个分别处于各自的同属层级下的  “第1个子元素” 并且 “是div标签” 的元素添加样式，一起来看看样式，如下图

 4.这边需要主要的是假如我在111前面插入一行，111这个div就不再是同属层级下的第一个子元素了，因此红色背景样式消失

 

所以，在没有加入“你好”这个h1标签之前，上面这个例子中 “111” 和 “222” 这两个元素他们同属一个层级下，并且 111 是同属层级下的第一个子元素且为div标签。aaa这个div其实也是一样的意思，aaa 和 bbb 同属于li标签这个层级下，并且 aaa 是同属标签li这个层级下的第一个子元素且为div标签才能成功赋予样式

 也是一次记录，希望看完对朋友们能有所帮助！

最后附上官方使用指南：CSS3 :nth-child() 选择器 | 菜鸟教程