优先级:
!import > 行内样式(1000)> Id(100)> 类、属性、伪类选择器(10)> 元素、伪元素(1)>通配符(0)>继承(0)
伪元素和伪类的区别
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;或是根据当前元素处于的状态,改变其样式。
它的功能和class
有些类似,但它是基于文档之外的抽象
,所以叫伪类。
- 伪元素本质上是创建了一个有内容的虚拟容器;或是对
元素中的特定内容进行操作(比如:
设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。)
它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
根本区别:是否创建了“新”的元素
伪元素:
伪类:
:after/::after和:before/::before的异同
相同点
- 都可以用来表示伪元素,用来设置对象前的内容
- :before和::before写法是等效的; :after和::after写法是等效的
不同点
- :before/:after是Css2的写法,::before/::after是Css3的写法
- 所以css2的要比css3的兼容好 ::before/:after 的兼容性要比::before/::after好 ,
- 不过在H5开发中建议使用::before/::after比较好
注意:
- 伪对象要配合content属性一起使用,类似于标签
- 伪对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
- 伪对象的特效通常要使用:hover伪类样式来激活