css优先级

优先级：

！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比较好

注意：

1. 伪对象要配合content属性一起使用，类似于标签
2. 伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3. 伪对象的特效通常要使用:hover伪类样式来激活