原文
大綱
1、偽元素
2、偽類元素
3、偽元素和偽類元素的區(qū)別
4、偽類和偽元素的使用
1、偽元素
偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內(nèi)容的第一個字或者第一行的機(jī)制，而偽元素可以使開發(fā)者可以提取到這些信息。并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容（比如常見的::before,::after）。
偽元素的由兩個冒號::開頭，然后是偽元素的名稱。
使用兩個冒號::是為了區(qū)別偽類和偽元素（CSS2中并沒有區(qū)別）。當(dāng)然，考慮到兼容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法，但是CSS3中新增的偽元素必須使用兩個冒號::。
一個選擇器只能使用一個偽元素，并且偽元素必須處于選擇器語句的最后。注：不排除未來會加入同時使用多個偽元素的機(jī)制。
同樣，第一段話是偽元素的清晰定義，也是偽元素與偽類最大的區(qū)別。簡單來說，偽元素創(chuàng)建了一個虛擬容器，這個容器不包含任何DOM元素，但是可以包含內(nèi)容。另外，開發(fā)者還可以為偽元素定制樣式。
以::first-line為例，它獲取了指定元素的第一行內(nèi)容并且將第一行的內(nèi)容加入到虛擬容器中。如果通過JavaScript來實(shí)現(xiàn)這個邏輯，那么要考慮的因素就太多了，比如制定元素的寬度、字體大小，甚至浮動元素的圖文混排等等。當(dāng)然，這些問題確實(shí)是可以用JavaScript來解決的，但是相對于::first-line簡簡單單的幾個字，用JavaScript恐怕不止這些吧！
2、偽類元素
偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。
偽類由一個冒號:開頭，冒號后面是偽類的名稱和包含在圓括號中的可選參數(shù)。
任何常規(guī)選擇器可以在任何位置使用偽類。偽類語法不區(qū)別大小寫。一些偽類的作用會互斥，另外一些偽類可以同時被同一個元素使用。并且，為了滿足用戶在操作DOM時產(chǎn)生的DOM結(jié)構(gòu)改變，偽類也可以是動態(tài)的。
其實(shí)第一段話就囊括CSS3偽類的全部定義了，這段話中指出CSS3偽類的功能有兩種：
1、獲取不存在與DOM樹中的信息。比如<a>標(biāo)簽的:link、visited等，這些信息不存在與DOM樹結(jié)構(gòu)中，只能通過CSS選擇器來獲??；
2、獲取不能被常規(guī)CSS選擇器獲取的信息。比如偽類:target，它的作用是匹配文檔(頁面)的URI中某個標(biāo)志符的目標(biāo)元素。
3、偽元素和偽類元素的區(qū)別
1、偽類基于的是當(dāng)前元素處于的狀態(tài)，是動態(tài)變化的。
2、偽元素是對元素中的特定內(nèi)容進(jìn)行操作。設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個字（母）、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無法完成的工作。
3、偽元素的權(quán)重比偽類高，比如一個容器的為元素和偽類都定義了同一屬性，但值不一樣，那么將采用偽元素的。
4、偽類和偽元素的使用
/*
以下代碼通過偽類"lang獲取不同lang屬性的節(jié)點(diǎn)，并為之設(shè)置偽元素::after，偽元素的
內(nèi)容是此節(jié)點(diǎn)的語言類型。
*/
q:lang(de)::after{
content: " (German) ";
}
q:lang(en)::after{
content: " (English) ";
}
q:lang(fr)::after{
content: " (French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
content: " (Unrecognized language) ";
}
參考網(wǎng)址
https://www.cnblogs.com/ihardcoder/p/5294927.html
你所不知的CSS::before和::after偽元素用法
