历史
伪类最开始的时候只是用来表示元素的动态(典型的锚伪类link、visited、hover、active)
在CSS2标准中对它进行了扩展让它虽然逻辑存在但不需要在DOM树中标识
伪元素代表了某个元素的子元素,虽然逻辑存在,但不存在于DOM树
定义
- 伪类:用于向某些选择器添加特殊的效果,伪类的效果可以通过添加实际的类来实现 。
- 伪元素:用于将特殊的效果添加到某些选择器,伪元素的效果可以通过添加实际的元素来实现 。
举例
一、链接伪类:
a:link——链接未访问
a:visited——链接访问过后
a:hover——鼠标悬停在链接上
a:active——鼠标点击连接时
二、段落伪元素
:/::first-letter——首字母下沉
:/::first-line——首行变化颜色
::selection——鼠标选中内容
三、其他伪类
:hover——鼠标悬停在元素上
:focus——元素获取焦点时
四、其他伪元素
:before/:after——在指定元素前/后添加内容
优先级
在计算权重的时候 :
- 伪类与类优先级相同 。
- 伪元素与标签优先级相同。
总结
- 伪类与伪元素都是用于向选择器加特殊效果
- 伪类与伪元素的本质区别就是是否抽象创造了新元素
- 伪类只要不是互斥可以叠加使用
- 伪元素在一个选择器中只能出现一次,并且只能出现在末尾
- 伪类与伪元素优先级分别与类、标签优先级相同