梗概
- 针对目标在父元素中的第几个位置来选择
选择器
- E:first-child 匹配父元素中的第一个子元素E
- E:last-child 匹配父元素中最后一个E元素
- E:nth-child(n) 匹配父元素中的第 n 个子元素E
- E:first-of-type 指定类型E的第一个
- E:last-of-type 指定类型E的最后一个
- E:nth-of-type(n) 指定类型E的第 n个
1. 说明:
- 括号中可以填常数, 表示选择第几个
- 括号中也可以填关于n(必须是n)的表达式
- 程序运行时自动给n依次赋值0, 1, 2, 3…
- 然后每次都取表达式的结果, 作为选择第几个
- 不需要父元素也能使用
实例
之一
之一
E:nth-of-type(2n), 则表达式的值依次为 0, 2, 4, 6…- 依次选择第2个, 第4个, 第6个…
E:nth-of-type(n+6), 则表达式的值依次为6, 7, 8…- 依次选择第6个, 第7个…
之一
#box1 span:nth-child(1){
/* css */
}