偽類選擇器和偽元素選擇器簡單理解

p.test1{
    ...
}

a:hover{
    ...
}

p::before{
    ...
}

p{
    ...
}

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

元素選擇器：如上面的p{}，實實在在的存在的元素。

偽元素選擇器：dom中不存在的元素，僅僅是css中用來渲染，添加一些特殊效果的，比如p::before，選擇p標簽（真元素）前面的假元素（偽元素，p標簽前面沒有元素，只是假設有）

類選擇器：真實有的類，我們自己正兒八經定義的類，如p.test1，選擇p標簽（元素選擇器）具有類test1的所有元素，這個類是具體的，形象的，看得見的

偽類選擇器：一個概念上的類，不是我們定義的，是抽象的。如a:hover，選擇a標簽（元素選擇器）中具有鼠標懸停類的所有元素，這個類是抽象的，不是我們自己定義的，再如first-child，選擇第一個，選擇具有這個類性質的所有元素，“第一個”，這個類就抽象了，我們沒必要定義一個第一個這樣的類