How to differentiate pseudo-class and pseudo-class Elements

How to differentiate pseudo-class and pseudo-class Elements

Some time ago, when I was writing a webpage, I used the pseudo element of CSS: after to implement the style, so I relived the pseudo class and pseudo element. It is usually used out during implementation, but it is a bit confusing to distinguish the two concepts.

First, let's take a look at W3S's definition of pseudo classes and pseudo elements:

Pseudo class: Used to add special effects to certain selectors.

Pseudo element: set special effects to some selectors.

For those with poor comprehension skills, I'm sorry to say that these two statements seem to be ...... Is this a concept?

From these two concepts, we can know: 1. The two are closely related to the selector; 2. "special" effects ......

Where is it special? What is the relationship between them and classes and elements?

Types of pseudo classes:

　　

Through the classification of pseudo classes, we can see that pseudo classes are based on elements in a certain state (such as hover) or when elements have certain characteristics (such as lang) play its role. Pseudo classes are added based on the dynamic state to achieve dynamic style changes. Its functions are similar to the class, but the latter has a static class mark in the document, while the pseudo class does not exist in the document. It belongs to the abstract class outside the document, it is called a pseudo-class. (When an element is in a certain state, pretend that there is a class) 3 *)

Types of pseudo elements:

　　

From the classification of pseudo elements, we can see that pseudo classes can operate on specific content of elements (such as first-letter ). This effect is similar to adding a special style to the first letter of a text, which cannot be implemented in a common selector (unless you add tags to the first letter of the text to make it an element ). The control content of a pseudo element is the same as that of an element, but the pseudo element does not exist in the document and is an abstract element. Therefore, it is called a pseudo element.

For example (pseudo element ):

Use pseudo elements:

<p>Angry birds</p>

p:first-letter {color: #00FF00;}

Do not use pseudo elements to achieve the above results:

<p>      <span class="changeColor">A</span>ngry birds!</p>

.changeColor {color:#00FF00;}

The former performs operations on the element content through pseudo elements. For the latter, the former performs direct operations on the elements, and the results are consistent. However, pseudo elements do not actually exist in the document.