伪类和伪元素有什么区别？

Question

div::after {}和div:after {}有什么区别？何时必须使用::而不是:？

双冒号和单冒号符号是用来区分伪类和伪元素。

上述声明的实际意思是什么？

- Mizuki

---

进一步澄清：CSS中伪类和伪元素有什么区别？ | 在before、after、first-letter和first-line伪元素中，我应该使用单冒号（:）还是双冒号（::）？ - BoltClock

Answer 1

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

伪类：

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

举例：

• :active
• :checked
• :nth-child()
• :first
• :hover

伪元素 ::

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

举例：

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop

如@stephanmg所述：

实际上，::before作为:before使用，::after作为:after使用，因为浏览器兼容性的原因。两者都是伪元素，但可能看起来像伪类。如果您阅读CSS代码可能会感到困惑。

- Bas van Dijk

---

值得注意的是，在实践中，::before被用作:before，::after被用作:after，这是因为浏览器兼容性的原因。它们都是伪元素，但可能看起来像是伪类，在阅读CSS代码时可能会令人困惑。 - stephanmg

@StephanM.G. 这正是我来到这里的原因！ - T.W.R. Cole

Answer 2

伪类： 根据元素的位置或其交互状态，浏览器会自动应用样式。

例如：

E:hover 当光标悬停在类型为 E 的元素上时，匹配该元素。

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

例如：

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

因此，

CSS3 选择器规范使用两个冒号前缀来表示伪元素，而不是一个冒号。 所以，:first–letter 变成了 ::first-letter，:first-line 变成了 ::first-line。 IE 8 及更早版本不支持双冒号前缀，因此您需要使用单冒号版本以避免在旧版浏览器中破坏样式。

- Ehsan

---

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

@Ehsan，你能回复Steeven的问题吗？ - logi-kal