伪元素、伪类和选择器之间的区别
今天我们来了解一下伪元素和选择器、伪类的有什么区别呢？
首先了解选择器以及css
css呢是创建html网页的样式，这个就不用多说了
选择器类型首先我们知道的有类选择器、ID选择器、子代选择器、元素选择器、标签选择器等
同时呢伪元素是指c3的属性，是一种特殊的样式
常用的有:after 和 :before 元素的前面和后面创建虚拟dom
伪类常用的四种方式：
a{
:link => a 标签（默认）
:hover => 鼠标放在a标签
:active => 鼠标点a标签
:visited => a标签被访问过
}
用例题就可以看懂
这是蛋壳公寓的脚注部分，可以看到两条颜色很浅淡的虚线，很多同学第一时间想起来的就是div的border写的，它其实是由我们的伪元素写出来的
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 300px;
height: 300px;
background-color: aquamarine;
margin: 150px 150px;
}
.nav {
width: 100px;
height: 100px;
background-color: greenyellow;
margin: auto;
}
//伪元素
.nav::after {
border: 1px solid blue;
position: fixed;
top: 148px;
content: '';
height: 0;
width: 100%;
display: block;
clear: both;
}
.nav::before {
border: 1px solid red;
position: fixed;
top: 300px;
content: '';
height: 0;
width: 100%;
display: block;
clear: both;
}
a {
display: block;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
//伪类
a:hover .nav {
display: block;
width: 100px;
height: 100px;
color: blue;
}
</style>
<div class="menu">
<a>
<div class="nav"></div>
</a>
</div>
效果图就是这样的
我们可以在控制台这里看到两个伪元素的存在，它们的存在与选择器或者伪类的存在都不一样，因为他们是虚拟的，在控制台显示也是不一样的
三者的区别就是：在DOM元素中是否存在？
css选择器是存在于dom元素中的，占据空间
c3伪元素是不存在与DOM元素中的，我们可以在控制台看到内容那里看到,因为它创建的虚拟的DOM，而且w3c规定了它的书写格式 伪元素是有两个冒号开头作为标识
伪类是通过一些特定的选择器根据特定的状态来给它特殊的样式，他不会修改DOM元素
