结构伪类选择器主要根据文档结构来选择元素,常用于根据父级元素选择里面的子元素。
元素:选择符{}
一、 nth-child(n) 默认n自加
nth-child(even) even偶数关键字 odd奇数关键字
(1)n可以是数字、关键字和公式
(2)n如果是数字,就是选择第n个子元素,里面数字从1开始
(3)n可以是,even偶数关键字,odd奇数关键字
(4)n可以是公式,如果n是公式,则从0开始计算,但是第0个元素或超出元素个数会被忽略。
公式:2n偶数(隔行变色的实现) 2n+1奇数 n+5从第五个开始到最后(包含第五个) -n+5前五个(包含第五个)
二、nth-of-type(n)
nth-of-type(n)用法与nth-child(n)一样,唯一的区别在于子元素是多种情况下,nth-child(n)无法实现
nth-child(n)运行流程:会把指定元素中的所有子元素排列序号,按照序号找到对应的子元素,然后查看验证对应的子元素标签名。
nth-of-type(n)运行流程:会把指定元素中的所有能对应上子元素标签名的子元素进行排列序号。
网友评论