On the difference between pseudo-class and pseudo-elements in CSS3 and the matters needing attention

The concept of pseudo-class and pseudo-elements in CSS is easy to confuse

Let's talk about the difference between pseudo-class and pseudo-elements today.

Defined

First look at the definition of pseudo-class and pseudo-elements
That's how they explain it.

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

• Pseudo-element: used to add special effects to certain selectors

Reason, maybe my Chinese is not good, I think these two words are equivalent:-)
There's no difference.
Is "stunt" for some selectors.

Standard there is such a sentence translated here is this

CSS introduces the concept of pseudo-classes and pseudo-elements in order to implement formatting based on information outside of the document tree

This is more abstract, in fact, the meaning is that we can not through class, ID and other elements of the selection of the supplement

Difference

This distinction we need an example to understand

<p>    <em>This</em>    <em>is a text</em></p>

What if we want the first EM-label font color to turn red?
Using our familiar pseudo-class is simple

em:first-child {    color:red;}

But what do we do if there's no pseudo-class?
This is what we need to add a class for the first EM tag

<p>    <em class= "First-child" >This</em>    <em>is a text</em></p>

em.first-child {    color:red;}

can achieve the same effect

<p>    <em>This</em>    <em>is a text</em></p>

Or is this an example?
Now I want to turn the first letter of this paragraph red
How do you do that?
This time we need to use pseudo-elements

p::first-letter {    color:red;}

Same assumption that pseudo-elements do not exist
At this point we can only nest span tags to implement

<p>    <em><span>T</span>his</em>    <em>is a text</em></p>

P span {    color:red;}

See here, I believe you have made it clear why a called pseudo-class, a pseudo-element
The effects of pseudo-classes can be implemented by adding actual classes
The effect of pseudo-elements can be achieved by adding the actual elements
The essential difference between them is whether the abstraction creates new elements.

History

The pseudo-class is initially used to represent the dynamic of the element (typical anchor pseudo-class link, visited, hover, active)
It is extended in the CSS2 standard so that it does not need to be identified in the DOM tree, although it is logically present
Pseudo-elements represent child elements of an element, although logic exists but does not exist in the DOM tree

Although their concepts are easily confused by us
But it doesn't affect our normal use.

I said in the introduction of CSS3 selector and the summary of usage
Pseudo-classes can only use ":"
Pseudo-elements can use either ":" or "::"
Here, I'll explain why.

The standard in CSS3 is that pseudo-class uses a single colon ":"
Pseudo-elements use double colons "::" (Avoid confusion)
But before this, either pseudo-class or pseudo-element uses a single colon ":"
So in order to ensure the compatibility of two methods of pseudo-elements are possible
But low version IE has double colon compatibility issues
So people who used to write styles used a single colon for pseudo-classes and pseudo-elements altogether.
Cause the confusion to continue

Attention

When using pseudo-classes and pseudo-elements
One thing to pay special attention to
Pseudo-classes, like real classes, can be overlaid with
There is no limit to the number, as long as it is not mutually exclusive
Like this.

em:first-child:hover {    color:red;}

This is perfectly possible.
But notice, here is the relationship with the
In other words, the first child element of "first-child" must be satisfied
To meet the "hover" cursor hover

Pseudo-elements need to be strictly
pseudo-elements can appear only once in a selector and can only appear at the end
(There was a misunderstanding here, so I made a change)
Like the following style is not valid

P::first-letter:hover {  /* ERROR: Pseudo element is not the end */    color:red;}

p::first-letter::selection {  /* incorrect notation: pseudo-elements appear multiple */    color:red;}

Say one more thing about their priorities.
At the time of calculating weights
Pseudo-class is the same as class precedence
Pseudo-elements are the same as label precedence

Summarize

• Both pseudo-and pseudo-elements are used to add special effects to selectors

• The essential difference between pseudo-class and pseudo-element is whether the abstraction creates a new element

• Pseudo-class can be overlaid as long as it is not mutually exclusive

• Pseudo-elements can appear only once in a selector and can only appear at the end

• Pseudo-class and pseudo-element precedence are the same as class and label precedence, respectively