如何使用结构为类选择器查找多个或者某个标签

67 阅读1分钟

作为前端小白,经常在结构伪类选择器(下文统称:孩子选择器)的使用上出现问题。 结构伪类选择器::nth-child(n){} 使用场景:在父盒子内部有多个相同的标签,例如:

div.png

选择第一个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-childn可以写哪些值?

问题2:nth-childn 的可以使用哪些关键字?分别代表什么含义?

问题3:nth-child 中可以使用 n 吗?表示什么含义?能用其他字母吗?

n的注意点:

  1. n为:0、1、2、3、4、5、6、……
  2. 通过n可以组成常见公式:

公式.png ##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 的第几个孩子

111.png

以上总结,希望给学习前端的入门的小伙伴有所帮助。