CSS 中的 : 和 :: 有什么区别？

我花了好几年时间在谷歌上搜索“CSS 中 : 和 :: 的区别”，才最终记住了这些信息。听起来很熟悉？那么这篇文章就是为你准备的。

首先：如果您需要快速回答这篇博文的标题，那么就不用再找了！

如果您需要更详细的解释，让我们深入研究一些示例。

“伪”是什么意思？

伪（pseudo）的英文定义是“假的”或“不真实的”。那么，伪类和伪元素究竟是什么意思呢？伪类和伪元素并非手动写入 HTML，也不会出现在 DOM（或文档树）中，而是由 CSS 创建的！

伪类允许您根据页面 HTML 之外的信息（例如用户交互或浏览器中存储的信息）选择 CSS 中的元素。伪类的访问方式为：单个冒号 (:) 后跟伪类名称。

您可以使用伪类根据元素的状态来设置其样式。您可能经常会看到页面上访问过的链接显示为不同的颜色。这是通过在 CSS 中:visited定位锚标签 ( a) 的伪类来设置其样式来实现的。

a:visited {
  color: #c58af9;
}

您可以在 Google 搜索引擎上观察这一点。前往google.com，搜索您曾经访问过的内容。打开浏览器开发工具，a:visited在 CSS 检查器中找到选择器。

伪类除了会受到浏览器信息（例如访问过的链接）的影响外，还会受到用户在页面上的操作（例如鼠标悬停或聚焦元素）的影响（添加或移除）。以下是:hoverGoogle 搜索结果中伪类的实际效果。

a:hover {
  text-decoration: underline;
}

要了解有关 CSS 中可用的不同类型的伪类的更多信息，您可以查看MDN 上的大量文档。

伪元素选择器允许您使用 CSS 来设置DOM 元素特定部分的样式。伪元素的访问方式是使用双冒号 (::) 加上伪元素选择器。与伪类不同，伪元素不能根据元素的状态来设置其样式。

举个例子。文章类网站通常使用“首字下沉”这种存在了数千年的印刷惯例，即使用一个很大的字母来标记一段文本的开头。您可以通过::first-letter在 CSS 中定位伪元素来实现这一点。

p::first-letter {
  font-size: 300%;
}

这是一个直观的示例，展示了首字下沉在我的博客文章上的显示效果。

您还可以使用选择器选择定位元素的第一行::first-line。

p::first-line {
  font-size: 300%;
}

您可能在 CSS 文件中使用的其他常见伪元素选择器包括：

在官方 MDN 文档中了解有关 CSS 中可用的不同类型的伪元素的更多信息。

就这样！希望这是你最后一次在 Google 上搜索CSS 中:和的区别::！