CSS “::”与”:”的区别–伪元素与伪选择器

在本文中，我们将介绍CSS中”::”和”:”的区别，以及它们分别代表的伪元素和伪选择器。CSS伪元素和伪选择器是一项功能强大的特性，它们能够通过选择器来操作HTML文档中的特定元素，从而增强页面的样式和交互效果。

阅读更多：CSS 教程

“::”伪元素

以”::”开头的伪元素允许开发者在文档中的某些元素之前或之后插入内容。伪元素主要用于处理文档的结构和样式，它们会生成一个虚拟的元素并将其插入到文档树中。以下是一些常用的伪元素：

• ::after：在元素的内容后插入内容，常用于添加一些额外的样式或装饰效果。
• ::before：在元素的内容前插入内容，常用于添加一些装饰性的元素。
• ::first-letter：选中元素内容的第一个字母，可以设置其样式。
• ::first-line：选中元素内容的第一行，可以设置其样式。
• ::selection：选中用户选择的文本，可以设置其样式。

例如，我们可以使用::before伪元素为p标签的内容添加一个箭头图标：

p::before {
  content: "\2192"; /* Unicode箭头字符 */
  margin-right: 5px;
}

“:”伪选择器

以”:”开头的伪选择器用于选中元素的特定状态或位置。它们基于元素的属性值、状态或位置来选择元素，并能为这些元素应用样式。以下是一些常用的伪选择器：

• :hover：当鼠标悬停在元素上时选择该元素。
• :active：当元素处于活动状态（例如被点击）时选择元素。
• :checked：当单选框或复选框被选中时选择元素。
• :nth-child()：根据元素在其父元素中的位置选择元素。
• :focus：当元素获得焦点时选择元素。

例如，我们可以使用:checked伪选择器为选中的复选框设置特定的样式：

input[type="checkbox"]:checked {
  border: 2px solid #f00;
}

“::”和”:”的区别

虽然在很长一段时间里，CSS中伪元素和伪选择器的语法都是以”:”开始的，但自CSS3规范中的细节修订后，伪元素的语法由”:”改为”::”，以与伪选择器的语法进行区分。这样的变化是为了增强CSS的可读性和可维护性，使开发者更容易区分伪元素和伪选择器。

然而，现代的浏览器对于”::”和”:”的使用都是兼容的，因此在实际应用中两者是可以互换使用的。不过，为了遵循最新的规范，我们应该使用”::”来表示伪元素，使用”:”来表示伪选择器。

总结

CSS中的”::”和”:”是用于表示伪元素和伪选择器的符号，它们提供了一种强大的方式来操作和样式化HTML文档中的特定元素。”::”用于表示伪元素，允许我们在元素的内容之前或之后插入内容。而”:”则用于表示伪选择器，用于选中元素的特定状态、位置或属性值。了解和灵活运用伪元素和伪选择器将有助于我们更好地掌握CSS的技术和创建出更丰富的页面效果。