Pseudo class selectors and pseudo-element selectors simple appreciated

p.test1{
    ...
}

a:hover{
    ...
}

p::before{
    ...
}

p{
    ...
}

<p class="test1">test1</p>
<p class=""test2>test2</p>
<a href="...">tag a</a>    

Selector element: As above p {}, an element does exist.

Pseudo-element selector: dom element does not exist, only the css for rendering, to add some special effects, such as p :: before, in front of the (true element) selected element p false label (pseudo-element, the front label p no element, there is only a hypothesis)

Class selector: some real class, we own eight children defined classes, such as p.test1, select the p tag (element selector) has all the elements test1 class, this class is concrete image, see see the

Pseudo-class selectors: class on a concept, not our definition, is abstract. As a: hover, select a tab (selector element) having all the elements hover class, the class is abstract, not our own definition of another example, first-child, select the first, having selected the class All the elements of nature, "the first", the class abstract, and we do not need to define a first such class