css选择器
- 结构伪类选择器
选择符 | 简介 |
---|---|
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个 |
- nth-child(n)
- n可以为数字,关键字和公式
- n为数字,则选择的第几个
- 常见的关键字有even偶数 odd奇数
- 第0个元素或超出了元素的个数会被忽略
- 常见的公式如下(如果n为公式,则从0开始计算)
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 |
n+5 | 从第五个开始(包括第五个)到最后 |
-n+5 | 前五个(包括第五个) |
- 伪元素选择器
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
【注意】 |
- before和after必须要有content属性
- before在内容的前面 after在内容的后面
- before和after创建一个元素,但属于行内元素
- 因为在 dom 里面看不见刚才创建的元素,所以我们称为伪元素
- 伪元素和标签选择器一样,权重为 1