何时使用伪类以及何时在 CSS 中使用伪元素选择器 [重复]答案

【问题标题】：when to use pseudo-classes and when to use pseudo-elements selectors in CSS [duplicate]何时使用伪类以及何时在 CSS 中使用伪元素选择器 [重复]
【发布时间】：2021-12-16 22:49:09
【问题描述】：

我不明白这些概念是什么时候应该使用:before 或:first-child 之类的伪类选择器，以及何时使用::before 之类的伪元素选择器。

【问题讨论】：

注意：CSS3 引入了 ::before 符号（带有两个冒号）来区分伪类和伪元素。浏览器也接受 CSS2 中引入的 :before。 - developer.mozilla.org/en-US/docs/Web/CSS/::before#syntax

标签： css css-selectors

【解决方案1】：

单冒号语法是较旧的实现。一般来说，有伪元素:: & 伪类:，它们并不完全相同。但在这种情况下，浏览器仍然支持过时的单冒号语法。

这意味着在您使用:before/::before 的示例中，它不会对结果产生影响，但通常您应该使用双冒号语法，因为之前和之后是伪元素，而不是伪-类。

阅读more on MDN。

【讨论】：

【解决方案2】：

::before 选择器在每个选定元素的内容之前插入一些内容。

使用 content 属性指定要插入的内容。

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

更多信息here

【讨论】：