css中::before是什么意思

css中“ :: before”的 意思 是“在 .. .之前”，是一个 伪类 元素，用于创建一个伪元素，并将其设置为选中元素的第一个子元素，插入到元素的其他内容之前，语法为“element::before{样式代码}”。

本教程操作环境：windows10系统、CSS3 && HT ML 5版、Dell G3 电 脑。

@H_ 406 _13@css中::before 是什么 意思

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

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

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

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

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

相同点：

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

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

不同点：

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

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

说明：

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

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

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

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

伪元素和伪类得区别

伪类

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

伪元素

伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选
择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。 css伪元素用于向某些选择器设置特殊效果。

2） 语法区别

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

3） 伪类/伪元素一览表

<伪类如下>

:active	选择正在被激活的元素	1
:hover	选择被鼠标悬浮着元素	1
:link	选择未被访问的元素	1
:visited	选择已被访问的元素	1
:first-child	选择满足是其父元素的第一个子元素的元素	2
:lang	选择带有指定 lang 属性的元素	2
:focus	选择拥有键盘输入 焦点 的元素	2
:enable	选择每个已启动的元素	3
:disable	选择每个已禁止的元素	3
:checked	选择每个被选中的元素	3
:target	选择当前的 锚 点元素	3

<伪元素如下>

::first-letter	选择指定元素的第一个单词	1
::first-line	选择指定元素的第一行	1
: :after	在指定元素的内容后面插入内容	2
::before	在指定元素的内容前面插入内容	2
::selection	选择指定元素中被用户选中的内容	3

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

（学习视频分享：css视频教程）

以上就是css中::before是什么意思的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css中::before是什么意思 全部内容，希望文章能够帮你解决 css中::before是什么意思 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css中::before是什么意思的详细内容...