对于伪类:nth-child()
的理解
用法:先判断同一个父亲下的节点,在判断是不是这个标签。
例如:
- 1、div:nth-child(3){ }
<div></div>
<div></div>
<div></div>
<div></div>
先找父亲,有几个父亲: body,1个;
再看节点,有没有这个节点: 第三个,有;
最后验证标签,第三个节点是不是div: 是。
所以,最后第三个div会被选中。
- 2、div:nth-child(2){ }
<div class="div-1">
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
先找父亲,有几个父亲: 2个,body和.div-1;
再看节点,有没有这个节点: 第二个,有;
最后验证标签,第二个节点是不是div: 是。
所以,最后会有两个div被选中(class="div-1"的第二个儿子和第二个兄弟)。
- 想选中只选中class="div-1"的第二个儿子可以写
.div-1 div:nth-child(2){ }
PS:括号里面可以写公式2n/3n/-n+5/n+5、写数字1/2/3、写even/odd之类的。
参考自: https://blog.youkuaiyun.com/Zeng__Yi/article/details/99285186