如果您是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)者的老手，我想你肯定使用過偽類和偽元素。但我還是建議你去查看一下目錄表，可能其中的一兩項(xiàng)你之前沒有聽說(shuō)過。
偽類在W3C上的技術(shù)定義不是特別復(fù)雜，它基本上是一個(gè)服務(wù)于CSS的虛擬的聲明或者元素的一個(gè)具體特性。一些常用的偽類有：link, :visited, :hover, :active, :first-child 和 :nth-child。還有很多，我們一時(shí)看不完。
偽類通常是要以冒號(hào)開頭（：），然后是偽類的名稱，有時(shí)也會(huì)在括號(hào)里賦值。
現(xiàn)在，偽元素和真元素是一樣的了，我們可以把其當(dāng)做HTML中的常用元素來(lái)使用。但它并不在文件樹或者dom中，這就是說(shuō)我們不能對(duì)他們進(jìn)行分類，只能利用CSS來(lái)創(chuàng)建。
我會(huì)在文章的最后談一下一些常見的偽元素：after；before；fisrt letter.
偽元素用單冒號(hào)還是雙冒號(hào)？
把雙冒號(hào)（：：）引入CSS3是為了使偽元素：：before,::after和類似于：hover, :active區(qū)分開來(lái).除了IE8及以下版本，所有瀏覽器都支持偽元素中的雙引號(hào)。
也有一些偽元素只支持雙冒號(hào)，例如：：backdrop
就切版網(wǎng)而言，我們會(huì)使用單冒號(hào)標(biāo)記，因?yàn)檫@樣可以向后兼容傳統(tǒng)瀏覽器；當(dāng)然，如果要求使用雙冒號(hào)標(biāo)記，我也會(huì)在偽類中使用雙冒號(hào)的。
你可以自由選擇哪一種標(biāo)記，沒有絕對(duì)的對(duì)與錯(cuò)。
然而，在寫這篇文章的時(shí)候，說(shuō)明書要使用單冒號(hào)標(biāo)記，原因就是我上面提到過的向后兼容性。
注意，新的CSS寫偽元素的方法是使用雙冒號(hào)的，例如：a::after{...},這樣可以使他們和偽類區(qū)分開來(lái)，有時(shí)你可以在CSS中看到。但是CSS3依然允許使用單冒號(hào)的偽元素，就為了是偽類向后兼容，現(xiàn)在我們已然建議你堅(jiān)持這種句法。
在這篇文章的標(biāo)題中，支持兩種冒號(hào)的偽元素會(huì)用兩種方式標(biāo)記出來(lái)，只支持雙冒號(hào)的偽元素就以雙冒號(hào)的形式呈現(xiàn)。
什么時(shí)候使用（不使用）生成內(nèi)容呢？
生成內(nèi)容是通過連接CSS特性中的content和偽元素中的：before或：after來(lái)實(shí)現(xiàn)的。
這個(gè)content可能是純文本或者是一個(gè)容器，這些使我們可以通過CSS來(lái)呈現(xiàn)出的一個(gè)生動(dòng)的模塊或者裝飾性的元素。這里，我指的是第一種形式----文本。
如果為了裝飾而使用過多的生成內(nèi)容，那些支持CSS生成內(nèi)容的屏幕讀者會(huì)大聲讀出來(lái)，這樣會(huì)導(dǎo)致UX的效果更加糟糕。
使用CSS生成內(nèi)容是為了裝飾或者一些不太重要的信息，但是屏幕讀者要正確使用，這樣可以保證擁有輔助技術(shù)的人不會(huì)混亂。在決定是否使用CSS合成內(nèi)容時(shí)要思考一下“漸進(jìn)增強(qiáng)”（Progressive Enhancement）。
實(shí)驗(yàn)性偽類和偽元素
一個(gè)偽類或偽元素是實(shí)驗(yàn)性的是指它的規(guī)格不是固定的，它的句法和行為是可以改變的。
然而我們現(xiàn)在可以通過應(yīng)用瀏覽器引擎前綴來(lái)是用偽類和偽元素。要做到這一點(diǎn)，我們可以參考http://caniuse.com/或者一些自動(dòng)前綴的工具，例如自由前綴或者自動(dòng)前綴。
在這篇文章中你會(huì)看到緊鄰偽類和偽元素名稱的實(shí)驗(yàn)性標(biāo)簽。
偽類
當(dāng)用戶執(zhí)行一個(gè)動(dòng)作時(shí)，狀態(tài)偽類會(huì)起作用。在連接還未被瀏覽時(shí)，CSS中的"action"也可以寫成“no action”。
讓我們來(lái)看一下。
:LINK
偽類link:是鏈接的正常狀態(tài)，通常是用來(lái)識(shí)別未被訪問過的鏈接。在分類中的其偽類沒有被識(shí)別前要生命：link,這四個(gè)的順序是這樣的:link, :visited, :hover,: active.Visited
:Visited 這個(gè)偽類用于已經(jīng)被訪問過的鏈接。按順序吧：visited這個(gè)軟件放在第二位（放在：link之后）
:HOVER
當(dāng)用戶的指針指到時(shí)，hover用于定義元素的樣式。不必把鏈接加到hover上，盡管這是一種常用的方法。
hover應(yīng)該位于第三位（放在偽類：visited之后）
:ACTIVE
：active這個(gè)偽類是用于定義一個(gè)被“激活”的元素或者一個(gè)指定的設(shè)備，或者一個(gè)觸屏設(shè)備的按鍵，它可以被鍵盤激活，就像：foucus一樣。
它的運(yùn)行和:foucus 類似，不同之處在于：：active是點(diǎn)擊鼠標(biāo)和松開鼠標(biāo)時(shí)起作用。
它應(yīng)該排在第四位，位于：hover之后
:FOCUS
偽類：focus是用來(lái)定義一個(gè)元素的樣式的，它已經(jīng)從指定設(shè)備，觸屏設(shè)備的界面或者鍵盤中獲得focus，是用來(lái)很多形式元素。
BONUS CONTENT: A SASS MIXIN FOR LINKS
如果你處理過CSS中的預(yù)處理程序，比如像Sass，那么bonus content可能會(huì)引發(fā)你的興趣。
如果你對(duì)CSS預(yù)處理程序沒有興趣---沒關(guān)系---你可以直接跳轉(zhuǎn)到結(jié)構(gòu)性的偽類部分。
秉著使工作流程最優(yōu)化的精神，下面是一個(gè)Sass mixin,我們可以創(chuàng)建一組基礎(chǔ)的鏈接。
在mixin背后的想法是在討論中沒有聲明缺省。所以，我們是被動(dòng)的，去聲明鏈接的4個(gè)階段。
:focus 和：active通常都是一塊聲明的，如果你想要分開，也可以分開。注意一點(diǎn)：mixin是可以應(yīng)用于任何HTML元素中的，而不只是links。
結(jié)構(gòu)性偽類：
結(jié)構(gòu)性偽類以文件樹或者dom 樹種的傳統(tǒng)信息為目標(biāo)，它不可以用其他類型的選擇器或者配合器所代替。
::FIRST-LETTER
First-letter是選擇一行文本中的第一個(gè)字母，如果一個(gè)元素包含在這一行的前面，例如圖片、視頻或者表格，那么首字母不會(huì)受影響并且可以被選擇出來(lái)。
它的這個(gè)特性可以用于段落當(dāng)中，例如，無(wú)需借助圖片或外部性能就增強(qiáng)排版的美觀度。
::FIRST-LINE
Firs-line 是用于定位元素中的第一行，它只在塊級(jí)元素中起作用。
當(dāng)用于段落的時(shí)候，只有第一行會(huì)有樣式，即使文本會(huì)轉(zhuǎn)行。
::SELECTION
：selection 是用于定義文本中被強(qiáng)調(diào)出來(lái)的那部分的樣式的。
::PLACEHOLDER
：placeholder 是利用HTML中的placeholder 特性來(lái)定位用于造型元素中的占位符文本。
It can also be written as ::input-placeholder, which is actually the syntax used in CSS.
它也可以寫成 ::input-placeholder，這實(shí)際上是CSS中的句法。
總結(jié)
CSS中的偽類和偽元素是不是很有用？他們的確給人們帶來(lái)了滿足感，但是這也是一個(gè)網(wǎng)絡(luò)設(shè)計(jì)者和開發(fā)者的生活。
請(qǐng)確保徹底測(cè)試徹底，但是真正應(yīng)用偽類和偽元素還有很長(zhǎng)的路要走。希望你能從這篇文章中有所收獲！同時(shí)不要忘記給它創(chuàng)建書簽哦。
----
文/切版網(wǎng)（www.qieban.cn）
