CSS “::” vs “:” – 伪元素 vs 伪选择器

在本文中，我们将介绍CSS伪元素（pseudo-element）和伪选择器（pseudo-selector）之间的区别和用法。CSS伪元素和伪选择器是用来选择文档中的特定元素或元素状态的方法。虽然它们在语法上很相似，但它们在功能和应用上有一些区别。

阅读更多：CSS 教程

什么是伪元素？

伪元素用来在元素内部创建虚拟的元素，并对它们进行样式设置。伪元素使用双冒号”::”表示。常用的伪元素包括：before、after、first-letter和first-line。

伪元素的语法

selector::pseudo-element {
  property: value;
}

在上面的语法中，selector表示要选择的元素，pseudo-element表示要应用的伪元素。

伪元素的示例

让我们以一个简单的例子说明伪元素的用法。假设我们要在段落的开头添加一个装饰性的引号。

<p>This is some text.</p>

p::before {
  content: "“";
  font-weight: bold;
}

在上面的示例中，我们使用了伪元素::before来在<p>元素的开头添加了一个引号。通过设置content属性为引号字符，我们实现了在文本前面添加引号的效果。同时，我们还设置了字体粗体(font-weight: bold)来使引号突出显示。

什么是伪选择器？

伪选择器用来选择元素的特定状态或位置。伪选择器使用单冒号”:”表示。常用的伪选择器包括：hover、active、first-child和nth-child等。

伪选择器的语法

selector:pseudo-selector {
  property: value;
}

在上面的语法中，selector表示要选择的元素，pseudo-selector表示要应用的伪选择器。

伪选择器的示例

让我们以一个简单的例子说明伪选择器的用法。假设我们要对鼠标悬停在链接上时进行样式设置。

<a href="#">This is a link</a>

a:hover {
  color: red;
  text-decoration: underline;
}

在上面的示例中，我们使用了伪选择器:hover来选择鼠标悬停在链接上的状态。通过设置color属性为红色和text-decoration属性为下划线，我们实现了鼠标悬停时链接的样式变化。

伪元素 vs 伪选择器

现在，让我们来比较一下伪元素和伪选择器之间的区别。

1. 区别一：语法表示

• 伪元素使用双冒号”::”表示，例如::before。
• 伪选择器使用单冒号”:”表示，例如:hover。

1. 区别二：应用范围

• 伪元素作用于文档中的元素特定部分，例如在一个元素的开头或结尾添加装饰性内容。
• 伪选择器作用于元素的特定状态或位置，例如鼠标悬停或是第一个子元素。

下面的表格总结了伪元素和伪选择器的几个常见应用示例：

总结

在本文中，我们介绍了CSS伪元素和伪选择器的区别和用法。伪元素用来在元素内部创建虚拟的元素，并对其进行样式设置，它们使用双冒号”::”表示。伪选择器用来选择元素的特定状态或位置，它们使用单冒号”:”表示。了解伪元素和伪选择器的区别，将有助于我们更好地使用CSS来实现不同的样式效果。

希望本文对您理解CSS伪元素和伪选择器有所帮助！