In CSS Pseudo classes and pseudo elements are easily confused

Today let’s talk about the difference between pseudo classes and pseudo elements

Definition

First let’s take a look at the definitions of pseudo-classes and pseudo-elements
w3cThis is how they are explained

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

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

To be honest, maybe my Chinese is not good, I think these two sentences are equivalent:-)
Can't see any difference at all
They all add "add" to some selectors Stunt"

The standard has such a sentence, which is translated as follows

CSS introduces the concepts of pseudo-classes and pseudo-elements in order to implement the document-based Formatting of information outside the tree

This is more abstract. In fact, it means supplementary elements that we cannot select through class, id, etc.

Difference

We need an example to understand this difference

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

What if we want the font color of the first em tag to turn red?
It is very simple to use the pseudo-classes we are familiar with

em:first-child {    color: red;}

But what do we do if there are no pseudo-classes?
This is what we need to do for the first em Tag adding class

<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>

This is still an example
Now I want the first letter of this paragraph to turn red
How to do it
This time we need to use pseudo elements

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

Similarly assume that pseudo elements do not exist
At this time we can only nest span tags to achieve

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

p span {    color: red;}

Seeing this, I believe everyone has understood why one is called a pseudo-class and the other is called a pseudo-element
The effect of the pseudo-class can be achieved by adding actual classes
The effect of the pseudo-element can be By adding actual elements to achieve
Their essential difference isWhether abstraction creates new elements

History

Pseudo-classes were originally used to represent Dynamic elements (typical anchor pseudo-classes link, visited, hover, active)
It has been extended in the CSS2 standard so that although it exists logically, it does not need to be identified in the DOM tree
The pseudo-element represents a certain Although the child elements of an element exist logically, they do not exist in the DOM tree

Although their concepts are easily confused by us
, it does not affect our normal use

I am in CSS3 As mentioned in the introduction and usage summary of the selector
Pseudo classes can only use ":"
And pseudo elements can use either ":" or "::"
Here I will explain why

The standard in CSS3 is that pseudo-classes use a single colon ":"
and pseudo-elements use double colons "::" (to avoid confusion)
But before that, whether it was a pseudo-class or Pseudo-elements all use a single colon ":"
So in order to ensure compatibility with pseudo-elements, both methods of using pseudo-elements are possible
But low versions of IE have double-colon compatibility issues
So people who wrote styles in the past are not familiar with pseudo-classes and pseudo-elements simply use a single colon
causing this confusion to continue

Note

When using pseudo-classes and pseudo-elements
There is one thing to pay special attention to
Pseudo classes are just like real classes and can be used in combination
There is no upper limit on the number, as long as they are not mutually exclusive
For example,

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

This is completely possible
But note, here It is the relationship of "and"
That is to say, it must satisfy both the "first-child" first child element
and the "hover" cursor suspension

Pseudo elements must be strict The multiple
pseudo-elements can only appear once in a selector, and can only appear at the end
(Some students misunderstood here, so I made a modification)
Like the following The styles cannot take effect

p::first-letter:hover {  /*错误的写法：伪元素不是末尾*/
    color: red;}

p::first-letter::selection {  /*错误的写法：伪元素出现了多个*/
    color: red;}

One more thing about their priority
When calculating the weight
Pseudo-class and class priority are the same
Pseudo elements have the same priority as tags

Summary

• Pseudo classes and pseudo elements are both used to add special effects to the selector

• The essential difference between pseudo-classes and pseudo-elements is whether abstraction creates new elements

• Pseudo-classes can be superimposed as long as they are not mutually exclusive

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

• The priorities of pseudo classes and pseudo elements are the same as the priorities of classes and tags respectively

The above is the detailed content of About the differences and precautions between pseudo-classes and pseudo-elements in CSS3. For more information, please follow other related articles on the PHP Chinese website!