css ::before和:befor的用法和区别以及伪元素和伪类的区别

大家好，欢迎来到IT知识分享网。

前言：css是前端不可缺少的一部分，也很重要。厉害的前端可以用最简洁的css，实现美观的布局。

下面我们来说一下::befor和:befor的用法及区别？

在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。

利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。

::befor使用场景（比如在一个元素前面加一个图标）

<div class="test"> 2019/11/29 15:35:51 </div>//在这前面加一个小闹钟的图标就可使用::befor

.test::before { content: url(./\(1\).png); }

相同点：

1、伪类对象，用来设置对象前的内容

2、::before和:before写法是等效的

不同点：

:befor是Css2的写法，::before是Css3的写法

:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

说明：

1、伪类元素要配合content属性一起使用

2、伪类元素是css渲染层加入的，不能通过js来操作

3、伪类对象特效通常通过：hover伪类样式来激活

我觉得这个有点鸡肋，可用可不用。

伪元素和伪类得区别

• 伪类

      伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。css伪类用于向某些选择器添加特殊的效果。

• 伪元素

2） 语法区别

  在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。

3） 伪类/伪元素一览表

<伪类如下>

伪类与类优先级相同，伪元素与标签优先级相同。顺便说一下优先级怎么判断，一般是 !important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。还有一个简单的计算方法，内联样式表的权值为 1000，ID 选择器的权值为 100，Class 类选择器的权值为 10，HTML 标签选择器的权值为 1，权值实际并不是按十进制计算的，用数字表示只是说明思想，我们可以把选择器中规则对应做加法，比较权值大小，权值越大优先级越高，如果权值相同前面的样式会被后面的覆盖。