今天我們來了解一下偽元素和選擇器、偽類的有什么區別呢？
首先了解選擇器以及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元素