How pseudo-class pseudo-elements are differentiated

Some time ago when writing web pages, using the pseudo-elements of CSS: After to implement the style, so revisit the pseudo-class and pseudo-elements. The time to realize it is to take it out, but it's a bit confusing when it comes to distinguishing between the two concepts.

First, look at W3s's definition of pseudo-classes and pseudo-elements:

Pseudo-Class: Used to add special effects to certain selectors.

Pseudo-element: sets special effects to certain selectors.

For those of me who are less able to understand than others, I am sorry to say that these two words seem to be ... This is a concept, right?

From these two concepts, we can know: 1. Both are inextricably linked to selectors; 2. " Special "effect ...

Where is the special? What do they have to do with classes and elements?

Types of pseudo-classes:

　　

By classifying pseudo-classes, we can see that pseudo-classes play their role based on some state of the element (e.g., hover, etc.) or when an element has some kind of characteristic (e.g. Lang, etc.). Pseudo-classes are added according to the dynamic state to implement dynamic changes in the style. The function is similar to the class, but the latter has a static flag of class in the document, and the pseudo-class does not exist in the document, it belongs to the abstract class outside the document, so it is called pseudo-class. (Pretend to have a class here when the element is in a certain state)

Types of pseudo-elements:

　　

From the classification of pseudo-elements, we can see that the pseudo-class can manipulate the specific content of the element (for example: First-letter, etc.). The effect of adding a special style like the first letter of the text is not possible in a normal selector (unless you label the first letter in the text to make it an element). The control content of the pseudo-element is consistent with the element, but the pseudo-element does not exist in the document, it is an abstract element, and is called a pseudo-element.

For example (pseudo-Element):

Using pseudo-elements:

<p>angry birds</p>

{color: #00FF00;}

Do not use pseudo-elements to achieve the above effect:

<p>      <span class= "ChangeColor" >a</span>ngry birds!</p>

{color:#00FF00;}

The former operates on element content through pseudo-elements, and for the latter, it is the direct manipulation of elements, and the effect is consistent. However, the pseudo-element does not actually exist in the document.

How pseudo-class pseudo-elements are differentiated