CSS :before和::before有什么区别

在本文中，我们将介绍CSS中的:before和::before伪类，并探讨它们之间的区别。

阅读更多：CSS 教程

什么是:before伪类？

:before是CSS中一种伪类选择器，用于在选定元素的内容之前插入内容。其语法如下：

selector::before {
    content: "插入内容";
}

其中，selector表示要选定的元素，content属性指定要插入的内容。

什么是::before伪元素？

::before是CSS中一种伪元素选择器，用于在选定元素的内容之前创建一个伪元素。其语法如下：

selector::before {
    content: "伪元素内容";
}

其中，selector表示要选定的元素，content属性指定伪元素的内容。

:before和::before的区别是什么？

虽然在功能上，:before和::before都可以在元素的内容之前插入其他内容，但它们之间有一些区别。

语法：:before采用单冒号表示，而::before采用双冒号表示。虽然两者在大多数情况下可以互换使用，但在一些比较严格的语法规范中，推荐使用::before。
继承性：:before具有继承性，而::before没有。继承性指的是，当一个元素设置了:before伪类样式时，它的子元素也会继承这种样式的效果。而对于::before伪元素，子元素不会继承其样式。
兼容性：:before在CSS2中引入，而::before是CSS3中引入的。虽然现代浏览器大多支持::before，但为了兼容性，也可以采用:before。

下面是一个示例，演示使用:before和::before分别在一个元素的内容之前插入内容：

<!DOCTYPE html>
<html>
<head>
<style>
div::before {
    content: "使用::before伪元素";
    color: blue;
}

div:before {
    content: "使用:before伪类";
    color: red;
}
</style>
</head>
<body>

<div>这是一个示例</div>

</body>
</html>

在上述示例中，我们使用::before和:before分别在一个div元素的内容之前插入不同的内容。结果是，使用::before伪元素的内容会显示为蓝色，而使用:before伪类的内容会显示为红色。