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

Question

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

Double colon and single-colon notation is to distinguish between pseudo-classes and pseudo-elements.

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

Answer 1

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

伪类:

A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.

例子:

• :活跃
• :检查
• :第n个 child ()
• :首先
• :悬停

伪元素::

Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.

例子:

• ::之后
• ::之前
• ::第一个字母
• ::一线
• ::选择
• ::背景

如@stephanmg 所述:

In practice ::before is used as :before and ::after is used as :after because of browser compatibility. Both are pseudo-elements, but may look like pseudo classes. This might be confusing if you read CSS code.