nth-of-type和nth-child的区别与相关使用
nth-of-type和nth-child的区别与相关使用，选取前几个，选取后几个，选取前几个和后几个，选取第几个到第几个等等
nth-of-type和nth-child的区别
1、:nth-child(n) 选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不管元素的类型，n 可以是数字、关键词或公式。
2、:nth-of-type(n)
:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素，对元素类型有限制；n可以是数字、关键词或公式，先分类型后数是第几个。
nth-of-type和nth-child的相关使用
| 选择器 | 作用 |
| :first-child | 所有标签中的第一个,并且要符合设定的标签类型 |
| :last-child | 所有标签中的最后一个,并且要符合设定的标签类型 |
| :nth-child() | 符合指定顺序的标签.()当中可写内容:一个数值,表示指定的顺序;英文单词odd奇数标签even偶数标签.公式:a*n +/- b,公式没有固定的写法,完全根据需求而定,a,b是根据需求自行设定的数字,n是css3系统规定的,从0开始的整数,将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果 |
| nth-last-child() | 与nth-child()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-child(3) |
| :first-of-type | 所有符合设定类型的标签中的第一个 |
| :last-of-type | 所有符合设定类型的标签中的最后一个 |
| :nth-of-type() | 符合指定顺序的标签,()当中可写内容:一个数值表示指定的顺序,英文单词odd奇数标签、even偶数标签.公式a*n +/- b公式没有固定的写法,完全根据需求而定a,b是根据需求自行设定的数字n是css3系统规定的,从0开始的整数将n赋值,是从0开始的整数,再根据公式计算出数值,按照数值给指定顺序的符合设定的标签添加样式效果 |
| :nth-last-of-type() | 与nth-of-type()的所有语法都相同,只是计算顺序,是从最后一位开始,例如:nth-last-of-type(3),所有符合设定类型的标签中的倒数第三个标签 |
:nth-child(n)
经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素
n 取负值，会有“向前”的效果，
比如:nth-child(-n+3)选择前三个元素，:nth-child(-2n+10)选择前十个里面的偶数元素
:nth-child(-n+3) 正数前三个
:nth-last-child(-n+3) 倒数前三个
:nth-child(n+4)选取大于等于4标签，从第四个到最后
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”,1,4,7,10..
:nth-child(2n+1)自定义选取标签，2n+1表示“隔一取一”,1,3,5,7..
:nth-child(n+3) 从第三个开始到最后
并集 :nth-child(-n+3),:nth-child(n+5)----前三个和第5个之后的部分 （用逗号隔开）
交集 :nth-child(n+3):nth-child(-n+6)----三到六 （直接拼接在后面，不需要隔开）
nth-of-type和nth-child的使用方法基本相同，注意其选取元素的差别即可。
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)