1. Pseudo-classes and pseudo-elements
Why does CSS introduce pseudo-elements and pseudo-classes: it is to format information outside the document tree, that is, pseudo-classes and pseudo-elements are used to decorate parts that are not in the document tree
Pseudo-classes are used to add corresponding styles to existing elements when they are in a certain state, which changes dynamically according to user behavior. For example: hover, although it is similar to ordinary css classes, it can add styles to existing elements, but it can only add styles to elements in a state that cannot be described by the dom tree, so it is called a pseudo-class.
Pseudo-elements are used to create some elements that are not in the document tree and add styles to them, such as :before to add some text before an element and add styles to the text, although the user can see the text, but the text is actually not in the document tree.
for example:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
If you want to change the style of the first li, you will generally set a class class on the li tag. In this case, you can change the way of writing and use pseudo-classes to implement it.
li:first-child{
}
Another example of pseudo-elements:
<p>hello world，and best wishes for you</p>
If we want to change the style of the first letter in the above text, we can use <span class="first">h</span> to modify it, and we can also use pseudo-element methods to achieve it.
p:first-letter{
}
Comparing the above two examples, it can be concluded that the object of the pseudo-class operation is the existing element in the document tree, and the pseudo-element is to create an element outside the document tree.