今晚上我們來簡單的聊一聊CSS的偽元素，多說無益，開聊
GG: 話說盤古開天闢地之時。
QQ：嗨，我們今天還能講的完嗎？您給來點實際的啊。
GG：要聽實際的是吧，得嘞，那今天我們就來聊一聊CSS裡的偽元素，這個可以吧。
QQ：可以可以，您來。
GG：話說這個CSS的偽元素呢，想必您各位也應該有所耳聞，今日我就班門弄一會斧子
QQ：抓緊說啊您，別耽誤我下班
GG：(翻白眼）CSS的偽元素目前一共有四個，分別是::first-line,::first-letter,::before,::after
QQ: 哦？還有呢
GG： 別急啊您，我們一個一個來，先看這個first-line和first-letter，第一個表示元素的第一行，第二個呢則表示元素的第一個字母，這倆呢說像也像說不像也不像
QQ： 啥叫像也不像呢
GG： 這個象呢，就是都是老大，都是第一，不像呢，主要是規則不像，CSS標準規定first-line必須出現再最內層的塊級元素之中，是最內層的塊級元素喲！
QQ： 您說就行，我帶著助聽器能聽見，不用喊
GG：光說能行嗎？剛剛驗證了您聽力不錯，現在得讓您上眼看看，來啊，把我那86的拉菲，不是，把我那86年的程式碼呈上來
QQ： 喝，86年，夠純的啊
GG：來，考考您的視力，這個First paragraph是什麼顏色的
QQ：這您還真難不倒我，綠色
GG：我看你頭上有點綠啊，這個First paragraph明明是藍色
QQ：哦？您來講講為什麼
GG：合著您這是腦袋不好啊，剛跟您說過，first-line必須出現再最內層的塊級元素之中
QQ： 那最內層不是塊級元素呢
GG： 最內層不是塊級元素，那就去找倒數第二層唄。來，再上一份86年的程式碼
QQ： 您家這86年的老物件挺多啊
GG：這個我就不讓你猜了，直接告訴你這個First paragraph是綠色，您知道這是為什麼嗎
QQ：因為結構的最內層是span，不是塊級元素，所以偽元素載入了div上，而又通過CSS給span加了樣式，所以加在偽元素上的樣式就被span上的樣式覆蓋掉了
GG：不錯不錯，是個好苗子，下面我們來看一看first-letter，first-letter就比較厲害了，我管你最裡面的元素是塊級元素還是行內元素，都得聽我的
QQ： 這個怎麼說呢？您繼續來個86年的程式碼？
GG：都知道搶我臺詞了，來，呈上來
GG：來，你說這個First letter的首字母F是啥顏色
QQ： 這個難不倒我，藍色，你這剛說了first-letter不管最裡面的元素是塊級元素還是行內元素，都得看first-letter的
GG： 不錯不錯，既然first-line和first-letter說完了，我們來看看下面那倆after和before，這倆比上面那倆還要厲害
QQ： 此話怎講
GG： first-letter和first-letter相當於把已有內容套上一個元素，而after和before則是無中生有，憑空造出一個元素
QQ： 這木厲害？隨隨便便就能造嗎？
GG： 那當然不能了，要想造出元素必須要指定他的content屬性才行
QQ： 那他倆有什麼好處呢？
GG： 好處大了，比如我們寫頁面時的裝飾性元素，都可以使用這種偽元素的方式新增，從而減少DOM中無意義的空元素並且保持HTML良好的語義性。
——突然QQ轉身就走
GG：你這是幹啥去啊
QQ： 幹啥去？我約了託尼老師燙頭
------------------------------------------------------------------------------------------------------------------
嘿嘿，寫點輕鬆的，各位大神輕噴，只是為了讓知識不那麼枯燥，有喜歡的關注我啊，需要霸王的也可以關注我啊，我不賣霸王，我就是看看人即將要頭皮鋥亮亮O(∩_∩)O