伪类和伪元素有啥区别？

Posted 2023-03-06

【中文标题】伪类和伪元素有啥区别？

【英文标题】：What is the difference between pseudo-classes and pseudo-elements?伪类和伪元素有什么区别？

【发布时间】：2017-06-11 13:58:14

【问题描述】：

div::after 和 div:after 有什么区别？我们什么时候必须使用:: 而不是:？

双冒号和单冒号是为了区分 伪类和伪元素。

上述语句的实际含义是什么？

【问题讨论】：

进一步消歧：What is the difference between a pseudo-class and a pseudo-element in CSS? | Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?

【参考方案1】：

来自https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

伪类：

CSS 伪类是一个关键字，前面有一个冒号 (:)，添加到选择器的末尾以指定您要设置所选元素的样式，并且 仅当它们处于特定状态时。例如，您可能希望仅在鼠标指针悬停在元素上时设置样式，或者在禁用或选中复选框时设置样式，或者在 DOM 树中作为其父元素的第一个子元素。

例子：

:活动 :勾选 :nth-child() :第一 :悬停

伪元素 ::

伪元素与伪类非常相似，但它们有区别。它们是关键字，这一次前面有两个冒号 (::)，可以添加到选择器的末尾以选择元素的某个部分。

例子：

::之后 ::之前 ::首字母 ::一线 ::选择 ::背景

正如@stephanmg 所说：

在实践中 ::before 用作 :before 并且 ::after 用作 :after 因为浏览器兼容性。两者都是伪元素，但可能 看起来像伪类。如果您阅读 CSS，这可能会令人困惑 代码。

【讨论】：

也许值得注意的是，在实践中 ::before 被用作 :before 并且 ::after 被用作 :after 因为浏览器的兼容性。两者都是伪元素，但可能看起来像伪类。如果您阅读 CSS 代码，这可能会让人感到困惑。

@StephanM.G.这正是把我带到这里的原因！

【参考方案2】：

伪类： 它由浏览器自动应用 取决于元素的位置或其交互状态。

例如：

E:hover 当光标位于 悬停在它上面。

伪元素： 它将样式应用于内容 基于它在 html 层次结构中的位置。

例如：

E::first-letter 这将样式应用于块级内第一行的第一个字母 元素 E。

那么，

CSS3 选择器规范用两个冒号而不是一个冒号作为伪元素的前缀。 所以，:first–letter 变成 ::first-letter 并且 :first-line 变成 ::first-line。 IE 8 及更早版本不理解双冒号前缀，所以需要使用 单冒号版本以避免旧浏览器中的样式中断。

【讨论】：

如果 ::first-letter 是一个伪元素，因为浏览器“根据其在 HTML 层次结构中的位置将样式应用于内容”，那么为什么:first-child、:nth-child(...) 等不是伪元素吗？它们还根据元素在 html 中的位置应用样式，与 ::first-letter 的参数相同。