CSS Properties-the difference between pseudo-classes and pseudo-elements

Let's start with a common phenomenon when we write CSS:: Before and : double colons and single colons in after are often seen in write CSS. Why is there a single colon followed by a double colon two ways?

In fact, mainly to distinguish between pseudo-class and pseudo-elements

Pseudo-class: Pseudo-classes are used to add special effects to certain selectors

Pseudo elements: Pseudo-elements are used to add special effects to certain selectors

Does it feel like a special prick? What's the difference between the two? Why are you doing this trouble!

CSS3 Such a design has his own purpose,(personally think he wants to have the concept of style class, this is only a personal view)

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.

difference

This is compared by :first-child pseudo-class :first-letter and pseudo-elements.

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

Pseudo-Class :first-child adds a style to the first child element

If we do not use pseudo-classes and want to achieve the above effects, 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 the class. So let's take a look at the element:

P:first-letter {color:red}<p>i am Stephen Lee.</p>

Pseudo elements :first-letter add style to first letter

So if we do not use pseudo-elements, to achieve the above effect, what should be done?

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

That is, we add one to the first letter and span then give the span added style.

The difference between the two has come out. That is:

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.

Summary

Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact CSS3 the pseudo-class is represented by a colon in order to differentiate between them, while pseudo-elements are represented by two colons.

:P seudo-classes         //Pseudo-class::P seudo-elements       //pseudo-elements

But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.

CSS Properties-the difference between pseudo-classes and pseudo-elements