css3 - What is the role of css pseudo-classes?

Question

As shown in the picture, this is what I encountered when I was reviewing interview questions. I would like to ask the master what are the specific differences?
Anyway, I didn’t find it when I wrote it. As for the effect, I still know it

Answer 1

Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements.
There is a description in the W3C specification on CSS3 selectors:

　A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

　This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

　A simple translation, the general idea is that a pseudo element consists of a double colon and the name of the pseudo element. The double colon was introduced in the current specification to distinguish pseudo-classes from pseudo-elements. However, pseudo-classes are compatible with existing styles, and browsers need to support old pseudo-classes at the same time, such as :first-line, :first-letter, :before, :after, etc.

　Now you can fully answer the question in the title. For the pseudo-elements that existed before CSS2, such as :before, the single colon and the double colon::before have the same effect.

　So, if your website only needs to be compatible with webkit, firefox, opera and other browsers, it is recommended to use double colon writing for pseudo elements. If it has to be compatible with IE browser, it is safer to use CSS2 single colon writing.

Answer 2

Baidu knows this kind of problem

See:

Pseudo elements https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements

Pseudo classes https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes