1. Understand what is a pseudo class? What are pseudo elements?
1. Types of pseudo classes
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 are each applied to an entire element, such as an entire link, paragraph, div, etc.
2. Pseudo-element types
Pseudo-elements act on a 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, such as before, the effect achieved by first-letter is to forge an element, and then add its corresponding effect;
Pseudo-classes do not 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 that they have similar effects and are written in the same way, but in fact, in order to distinguish the two, CSS3 has clearly stipulated that pseudo-classes are represented by a colon, while pseudo-elements are represented by two colons To represent.
But because of compatibility issues, most of them are still unified single colons now, but regardless of compatibility issues, we should develop good habits as much as possible to distinguish between the two when writing.
2. The characteristics and differences of pseudo-classes and pseudo-elements
1. The pseudo-class is essentially to make up for the lack of conventional CSS selectors in order to obtain more information
2. Pseudo-elements essentially create a virtual container with content
3. The syntax of pseudo-classes and pseudo-elements in CSS3 is different
Pseudo-class :link :hover single colon
Pseudo-elements ::before ::after double colon
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 new elements, this newly created element is called "pseudo-free"
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 of an element that logically exists but does not actually exist in the document tree
7. Pseudo-categories: tags exist in the dom document, and the style is changed when pseudo-categories
8. Because the pseudo-class is similar to adding a class, it can be multiple, and the pseudo-element can only appear once in a selector, and can only appear at the end