伪元素~伪类
伪元素
定义：用于将特殊的效果添加到某些选择器
伪类表
| 属性 |
描述 |
CSS |
| :first-letter |
向文本的第一个字母添加样式 |
1 |
| :first-line |
向文本首行添加样式 |
1 |
| :before |
在元素之前添加内容 |
2 |
| :after |
在元素之后添加内容 |
2 |
关于:before和::before的区别和伪元素的注意
- 伪元素的由两个冒号::开头，然后是伪元素的名称
- 使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::
- 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后
- :after还有一个妙用，那就是清除浮动，给父元素追加:after之后，设置content：" ";clear:both; 就可以清除浮动
伪类
定义: 用于向某些选择器添加特殊的效果
| 属性 |
描述 |
CSS |
| :active |
向被激活的元素添加样式 |
1 |
| :focus |
向拥有键盘输入焦点的元素添加样式 |
2 |
| :hover |
当鼠标悬浮在元素上方时，向元素添加样式 |
1 |
| :link |
向未被访问的链接添加样式 |
1 |
| :visited |
向已被访问的链接添加样式 |
1 |
| :first-child |
向元素的第一个子元素添加样式 |
2 |
| :lang |
向带有指定 lang 属性的元素添加样式 |
2 |
区别总结
- 伪类与伪元素的根本区别在于它们是否创造了新的元素(抽象)
- 如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类
- 一个元素可以同时添加多个伪类，而每一次只能对一个伪元素进行操作
- 书写形式上的区别，单冒号是伪类，双冒号是伪元素（但这点不能作为绝对区分的点）
