CSS 为什么在这里有两个冒号span::before

在本文中，我们将介绍为什么在 CSS 中有些伪元素的选择器使用了两个冒号而不是一个。特别是我们将关注伪元素 ::before 的使用。

阅读更多：CSS 教程

什么是伪元素（pseudo-element）

伪元素是 CSS 提供的一种选择器，它能够在 HTML 元素的特定位置上添加样式，而不需要在 HTML 结构中添加额外的元素。伪元素以两个冒号 :: 开头，用于区分伪元素和伪类（pseudo-class）。

单冒号 : 与双冒号 ::

在 CSS2 规范中，伪元素的选择器使用了单冒号 :。例如，使用 :before 来选择元素的前面插入内容。然而，在 CSS3 规范中，为了区分伪类和伪元素，引入了双冒号 :: 作为伪元素的选择器。

但是，为了向后兼容，在 CSS3 规范中单冒号 : 仍然可以用于表示伪元素的选择器。因此，对于一些使用了单冒号的伪元素（如 :before），它们的伪元素选择器可以写作 ::before 或者 :before。

实际上，大多数现代浏览器都支持双冒号 :: 语法，因此推荐使用 ::before 或者 ::after。

以下是一个示例，演示了如何使用 ::before 伪元素在元素的前面插入内容：

p::before {
  content: "前面插入的内容";
  font-weight: bold;
}

为什么使用双冒号 ::？

为什么新的 CSS3 规范中引入了双冒号 :: 作为伪元素的选择器呢？

首先，双冒号 :: 更直观地表示选择的是伪元素而不是伪类。使用 ::before 比 :before 更能准确地表达意图。

其次，双冒号 :: 有助于与已存在的单冒号伪类进行区分。在 CSS2 规范中，所有的伪元素选择器都使用了单冒号。因此，在引入双冒号的 CSS3 规范中，使用双冒号可以避免与已存在的选择器产生冲突。

虽然双冒号 :: 相对于单冒号 : 在语义和语法上更好，但由于历史原因，单冒号的伪元素选择器仍然被支持和使用。

示例与兼容性考虑

伪元素 ::before 的主要应用是在元素的前面插入内容。以下是一个示例，展示了如何通过 ::before 插入箭头图标：

.button::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  width: 10px;
  height: 10px;
  background-image: url("arrow.png");
}

在上述示例中，通过设置 content 为空字符串，然后使用 background-image 属性来指定箭头图标的路径。通过设置伪元素的 display 属性为 inline-block，可以在行内元素的前面插入图标。

需要注意的是，虽然大多数现代浏览器都支持双冒号 :: 语法，但为了兼容性考虑，在编写 CSS 时仍然建议使用单冒号 : 作为伪元素的选择器，特别是对于一些特殊的伪元素，如 ::placeholder、::selection 等。

总结

在本文中，我们介绍了为什么在 CSS 中有些伪元素的选择器使用了两个冒号而不是一个。我们了解到双冒号 :: 更直观地表示选择的是伪元素而不是伪类，并与已存在的单冒号伪类进行了区分。尽管现代浏览器支持双冒号 :: 语法，但为了提高兼容性，建议在编写 CSS 时使用单冒号 : 作为伪元素的选择器。

通过对伪元素的认识，我们可以更好地利用 CSS 的强大功能，为网页添加更多的样式和交互效果。希望本文对你理解 CSS 中的伪元素有所帮助。