Summary of pseudo-elements and pseudo-elements of CSS Common properties

We talked about the ID selector and class selector, and their differences and relationships, and let's explore the magical categories and pseudo-elements.

In fact, I used to pseudo-class and pseudo-elements are also confused, and now decided to peel off its mysterious cloak, first of all, what is pseudo-class? What is a pseudo-element?

Understanding of pseudo-classes and pseudo-elements:

Official explanation:

The pseudo-class is initially used to represent the dynamic state of some elements, typically the various states of the links (link, active, hover, visited) that are commonly used, and then the CSS2 standard
Extends its conceptual scope to a "ghost" classification that is logically present but is not identified in the document tree.

Pseudo-elements represent the child elements of an element that, although logically present, do not actually exist in the document tree, such as after, before, etc., which we normally use.

His superficial understanding is that the pseudo-class is a class that does not need to be identified, the pseudo-element is an element, but does not exist with the document tree.

About usage: A pseudo-class is preceded by a colon, and a pseudo-element is preceded by two colons. E:first-child pseudo-class, e::first-line pseudo-element. This is the latest CSS3 standard, but in CSS2
About after and before all use a colon, and here you need to pay attention. And CSS3 also extended a lot of pseudo-class, here does not mention, interested in their own can go to check the information.

Common applications:
Pseudo-Class:
1.a link Style <a href= "#" > Click link </a> a:hover{color:red} mouse hover font turns red.

2. Interlaced Color <ul><li>1</li><li>2</li><li>3</li><li>4</li></ Ul> ul Li:nth-child (even) {background-color: #ccc} or UL Li:nth-chilid (2): {background-clolor: #ccc}

Pseudo elements:
Clear float:
. clear{zoom:1}
. Clear:after{display:block;content: '; clear:both;}

As for pseudo-classes and pseudo-elements, there are many interesting effects on pseudo-classes and pseudo-elements.