What are pseudo-classes and pseudo-elements?The difference between pseudo-classes and pseudo-elements

First, understand what is a pseudo-class?What are pseudo-elements?

1. Pseudo-class types

The object of the pseudo-class is the entire element

a:link{color:#111}a:hover{color:#222}div:first-child{color:#333}div:nth-child(3){color:#444}

Although these conditions are not DOM-based, the results each act on a complete element, such as an entire link, paragraph, div, etc.

2. Types of pseudo elements

Pseudo-element acts on part of an element: the first line or first letter of a paragraph

p::first-line{color:#555}p::first-letter{color:#666}a::before{content : "hello world";}

3. Summary:

Pseudo elements are actually equivalent to forging an element. For example, the effect achieved by before and first-letter is to forge an element and then add its corresponding effect;

Pseudo-classes don't fake elements, for example first-child just adds styles to child elements.

The reason why pseudo-elements and pseudo-classes are so easy to confuse is because they have similar effects and are written in the same way, but In fact, in order to distinguish between the two, CSS3 has clearly stipulated that pseudo-classes are represented by a colon, and pseudo-classes are represented by a colon.Elements are represented by two colons.

But because of compatibility issues, most of them are still single colons. But aside from compatibility issues, we should develop a good habit when writing and distinguish between the two.

Second, the characteristics and differences between pseudo-classes and pseudo-elements

1. Pseudo-classes are essentially to make up for the inadequacy of regular CSS selectors in order to get more information

2. Pseudo-elements essentially create a virtual container with content

3. The syntax of pseudo-classes and pseudo-elements is different in CSS3

pseudo-class :link :hover single colon

Pseudo-elements ::before ::after Double colons

4. Multiple pseudo-classes can be used at the same time, but only one pseudo-element can be used at the same time

5. The fundamental difference between pseudo-classes and pseudo-elements is: whether they create a new element, this newly created element is called "pseudo-no-element"

6. Pseudo element/pseudo object: It does not exist in the DOM document, it is a virtual element, and it is to create a new element.

This new element (pseudo-element) is a child element of an element that exists logically but does not actually exist in the document tree

7. Pseudo-class: There are tags in the dom document, and the style is changed when the pseudo-class is used

8. Because pseudo-classes are similar to adding classes, there can be multiple ones, while pseudo-elements can only appear once in a selector and can only appear at the end