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

Question

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

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

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

Answer 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，这可能会令人困惑 代码。

Answer 2

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

例如：

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

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

例如：

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

那么，

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