Summary of css common attributes pseudo-elements and pseudo-elements

In the previous times, we talked about the id selector and class selector respectively, as well as their differences and connections. Let’s explore the magical classes and pseudo-elements together.

In fact, I was confused about pseudo-classes and pseudo-elements before. Now I decided to peel off its mysterious coat. First of all, what is a pseudo-class? What are pseudo elements?

Understanding of pseudo-classes and pseudo-elements:

Official explanation:

Pseudo-classes were initially used to represent the dynamic status of some elements, typically commonly used links. The various states (link, active, hover, visited), then the CSS2 standard
expanded its conceptual scope, making it all "ghost" categories that exist logically but have no identity in the document tree.

Pseudo elements represent the sub-elements of a certain element. Although this sub-element exists logically, it does not actually exist in the document tree, such as the after, before, etc. we usually use.

My rough understanding is that a pseudo-class is a class that does not need to be identified, and a pseudo-element is an element, but it does not exist in the document tree.

About usage: Pseudo-classes are preceded by a colon, and pseudo-elements are preceded by two colons. E:first-child pseudo-class, E::first-line pseudo-element. This is the latest CSS3 standard, but in CSS2
uses a colon for both after and before, so everyone needs to pay attention here. Moreover, CSS3 has also expanded a lot of pseudo-classes, which I won’t mention here. If you are interested, you can check the information yourself.

Common applications:
Pseudo class:
1.a link styleclick link a:hover{color:red} mouse hover The font turns red.

2. Interlaced color change

• 1
• 2
• 3
• 4

pseudo-element:
Clean up floats:
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

About pseudo-classes and pseudo-elements , that’s it for now. Regarding pseudo-classes and pseudo-elements, many interesting effects can be achieved.

For more articles related to summary of common css attributes pseudo-elements and pseudo-elements, please pay attention to the PHP Chinese website!