伪类选择器和伪元素选择器简单理解

伪类选择器和伪元素选择器简单理解

一、总结

一句话总结：

元素选择器：如上面的p{}，实实在在的存在的元素。

伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）

类选择器：真实有的类，我们自己正儿八经定义的类，如p.test1，选择p标签（元素选择器）具有类test1的所有元素，这个类是具体的，形象的，看得见的

伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如first-child，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类

二、伪类选择器和伪元素选择器简单理解

转自或参考：伪类选择器和伪元素选择器简单理解
https://www.cnblogs.com/olivertian/p/11109621.html

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，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类