使用结构伪类选择器在HTML中定位元素
1、作用与优势:
- 作用:根据元素在HTMIL中的结构关系查找元素
- 优势:减少对于HTML中类的依赖,有利于保持代码整洁
- 场景:常用于查找某父级选择器中的子元索
2、选择器
选择器 | 说明 |
E:first-child {} | 匹配父元素中第一个了元素,并且是E元素 |
E:1ast-child {} | 匹配父元素中最后一个子元素,并且是E元素 |
E:nth-child(n) {} | 匹配父元素中第n个子元素,并且是E元素 |
E:nth-last-child(n) {} | 匹配父元素中性数第n个子元素,并且是E元素 |
其中n的注意点:
- n可以为1 2 3 4 5 6 7 8 9 等等
- 通过n组成常见公式
功能 | 公式 |
偶数 | 2n,even |
奇数 | 2n+1,2n-1,odd |
前五个 | -n+5 |
第五个向后 | n+5 |
伪元素:一般网页中非主体的内容可以使用伪元素
区别:
- 元素:HTML设置的标签
- 伪元素:由CSS模拟出的标签效果
种类:
伪元素 | 作用 |
::before | 在父元素内容的最前添加一个伪元素 |
::after | 在父元素内容的最后添加一个伪元素 |
注意点:
- 必须设置content属性才能生效
- 伪元素默认是行内元素