作为前端小白,经常在结构伪类选择器(下文统称:孩子选择器)的使用上出现问题。 结构伪类选择器::nth-child(n){} 使用场景:在父盒子内部有多个相同的标签,例如:
选择第一个li标签:.div li:nth-child(1){}
或者:.div li:first-child{}
选择最后一个li标签:.div li:nth-child(4){}
或者:.div li:last-child{}
选择所有偶数标签.div li:nth-child(2n){}
选择所有奇数标签.div li:nth-child(2n+1){}
问题1:nth-child 的 n可以写哪些值?
问题2:nth-child 的 n 的可以使用哪些关键字?分别代表什么含义?
问题3:nth-child 中可以使用 n 吗?表示什么含义?能用其他字母吗?
n的注意点:
- n为:0、1、2、3、4、5、6、……
- 通过n可以组成常见公式:
##nth-of-type结构伪类选择器(扩展)
:nth-child与:nth-of-type区别
E:nth-child(n):首先根据 :nth-child(n) 找到孩子,再去看前面的 E 是否匹配
E:nth-of-type(n):首先看 E 指定的元素,之后再去看 :nth-of-type 的第几个孩子
以上总结,希望给学习前端的入门的小伙伴有所帮助。