Detailed explanation of CSS properties

CSS pseudo-classes are used to add special effects to certain selectors.

CSS pseudo-elements are used to add special effects to certain selectors.

Two points can be made clear. The first is that both are related to the selector, and the second is to add some "special" effects. What specifically refers here is that the two describe things that other css cannot describe.

Pseudo class type

Pseudo element type

Difference

Pseudo class is used here: first- child and the pseudo-element :first-letter for comparison.

p>i:first-child {color: red}<p><i>first</i><i>second</i></p>

//Pseudo-class :first-child Add style to the first child element
If we don’t use pseudo-classes and want to achieve the above effect, we can do this:

.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>

That is, we add a class to the first child element and then define the style of this class. Then let’s take a look at adding styles to the first letter

p:first-letter {color: red}<p>I am stephen lee.</p>

// Pseudo element :first-letter So if we don’t use pseudo elements, what should we do to achieve the above effect? What to do?

.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>

That is, we add a span to the first letter, and then add a style to the span.
The difference between the two has come out. That is:

The effect of pseudo-class can be achieved by adding an actual class, while the effect of pseudo-element needs to be achieved by adding an actual element. This is why one of them is called pseudo-class and the other is That's why it's called a pseudo-element.

Summary

The reason why pseudo-elements and pseudo-classes are so easy to confuse is because their effects are similar and their writing methods are similar. However, in fact, in order to distinguish the two, CSS3 has clearly stipulated the use of pseudo-classes. It is represented by one colon, while pseudo-elements are represented by two colons.

:Pseudo-classes  ::Pseudo-elements

However, due to compatibility issues, most of them still use a single colon. However, regardless of compatibility issues, we should try our best to develop good habits when writing and distinguish between the two.