【CSS3】偽類與偽元素真的不“偽”，且不要記混喲
博客說明
文章所涉及的部分資料來自互聯網整理，當然還有自己個人的總結和看法，分享的目的在于共建社區和鞏固自己，參考的資料如有侵權，請聯系本人洗掉！幸好我在，感謝你來！
說明
前端開發一年之前從來不用，一年之后偽類偽元素真香！
但是有一個問題，偽類和偽元素傻傻分不清！今天就來好好的辨一辨它們，
偽類與偽元素
偽類
什么是偽類？
偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的，
最常見的一個場景是在使用懸停效果的時候，當用戶懸停在指定的元素時，使用:hover可以來描述這個元素的狀態，
偽類，那么肯定與類有關系，它可以為已有的元素添加樣式，
注意
添加樣式需要在一種特定的場景下，也就是
DOM樹無法描述的狀態下才能為元素添加樣式，
a標簽應用的偽類
/* 未訪問的鏈接 */
a:link { color: red; }
/* 已訪問的鏈接 */
a:visited { color: blue; }
/* 滑鼠懸停鏈接 */
a:hover { color: yellow; }
/* 已選擇的鏈接 */
a:active { color: black; }
:hover的應用比較多，比如滑鼠樣式，懸浮樣式，
寫一個后話（寫至少八個不同的:hover效果）
偽元素
什么是偽元素？
偽元素用于創建一些不在DOM檔案樹中的元素，并為其添加樣式，
舉一個經典的例子，:before會在一個元素前增加一些文本，并為這些文本添加樣式，
在表現上我們是可以看到這些文本，但是這些文本實際上不在DOM檔案樹中，
案例（::before 偽元素）
h1::before {
content: '我是多余！';
}
<h1>Hello World！</h1>
效果：
區別
操作方式
偽類的操作物件是檔案樹中已有的元素，而偽元素則創建了一個檔案數外的元素，
只要記住加粗的話就行！
再啰嗦一遍！偽類與偽元素的區別在于：有沒有創建一個檔案樹之外的元素，
要是還不行，那就來看看！
案例
這里用偽類 :first-child 和偽元素 :first-letter 來進行比較，這是最經典的比對案例了，
偽類 :first-child
按照說法：偽類并沒有創建元素，只是在原來的元素上加了效果，
// 使用偽類
i:first-child {color: red}
<p>
<i>A</i>
<i>B</i>
</p>
// 不使用偽類
.first-child {color: red}
<p>
<i class="first-child">A</i>
<i>B</i>
</p>
他們展示的效果是一致的，
偽元素 :first-letter
// 使用偽元素
p:first-letter {color: red}
<p>ABCD</p>
// 不使用偽元素
.first-letter {color: red}
<p><span class="first-letter">A</span>BCD</p>
表現的效果是一樣的，但是實際將A用<span>標簽包起來的，也就是說創建了一個新的元素，
書寫方式
現在是不是看到很多雙冒號的和單冒號的在css里面飄？
其實在CSS3之前，因為偽元素和偽類效果類似而且寫法相仿，這就是文章開頭所說的，偽元素和偽類傻傻分不清！
但 CSS3 為了區分這兩兄弟，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示，
別急，還有一個但是！
因為IE這個落事鬼，考慮兼容性的問題，所以有的代碼中還是統一的單冒號
除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法
總結
從沒用過，或者不記錄一下，永遠不知道CSS里面也還有這么多的故事？
前端的海很深，CSS就夠游一頓了！
加油??！希望本文能夠讓你記住偽類與偽元素之間的差別！哪怕只是在本文閱讀的時間之內，
感謝
萬能的網路
以及勤勞的自己，個人博客，GitHub測驗，GitHub
公眾號-歸子莫，小程式-小歸博客
如果你感覺對你有幫助的話，不妨給我點贊👍吧，持續關注也行哈！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/398945.html
標籤：其他