如果您是一個網(wǎng)頁設(shè)計和開發(fā)者的老手血久，我想你肯定使用過偽類和偽元素耳幢。但我還是建議你去查看一下目錄表迂苛，可能其中的一兩項你之前沒有聽說過斑粱。
偽類在W3C上的技術(shù)定義不是特別復(fù)雜弃揽，它基本上是一個服務(wù)于CSS的虛擬的聲明或者元素的一個具體特性。一些常用的偽類有：link, :visited, :hover, :active, :first-child 和 :nth-child则北。還有很多矿微，我們一時看不完。
偽類通常是要以冒號開頭（：）尚揣，然后是偽類的名稱涌矢，有時也會在括號里賦值。
現(xiàn)在惑艇，偽元素和真元素是一樣的了蒿辙，我們可以把其當(dāng)做HTML中的常用元素來使用拇泛。但它并不在文件樹或者dom中滨巴，這就是說我們不能對他們進行分類思灌，只能利用CSS來創(chuàng)建。
我會在文章的最后談一下一些常見的偽元素：after恭取；before泰偿；fisrt letter.
偽元素用單冒號還是雙冒號？
把雙冒號（：：）引入CSS3是為了使偽元素：：before,::after和類似于：hover, :active區(qū)分開來.除了IE8及以下版本蜈垮，所有瀏覽器都支持偽元素中的雙引號耗跛。
也有一些偽元素只支持雙冒號，例如：：backdrop
就切版網(wǎng)而言攒发，我們會使用單冒號標記调塌，因為這樣可以向后兼容傳統(tǒng)瀏覽器；當(dāng)然惠猿，如果要求使用雙冒號標記羔砾，我也會在偽類中使用雙冒號的。
你可以自由選擇哪一種標記偶妖，沒有絕對的對與錯姜凄。
然而，在寫這篇文章的時候趾访，說明書要使用單冒號標記态秧，原因就是我上面提到過的向后兼容性。
注意扼鞋，新的CSS寫偽元素的方法是使用雙冒號的申鱼，例如：a::after{...},這樣可以使他們和偽類區(qū)分開來，有時你可以在CSS中看到云头。但是CSS3依然允許使用單冒號的偽元素捐友，就為了是偽類向后兼容，現(xiàn)在我們已然建議你堅持這種句法盘寡。
在這篇文章的標題中夷磕，支持兩種冒號的偽元素會用兩種方式標記出來，只支持雙冒號的偽元素就以雙冒號的形式呈現(xiàn)航闺。
什么時候使用（不使用）生成內(nèi)容呢软棺？
生成內(nèi)容是通過連接CSS特性中的content和偽元素中的：before或：after來實現(xiàn)的。
這個content可能是純文本或者是一個容器影涉，這些使我們可以通過CSS來呈現(xiàn)出的一個生動的模塊或者裝飾性的元素变隔。這里，我指的是第一種形式----文本蟹倾。
如果為了裝飾而使用過多的生成內(nèi)容匣缘，那些支持CSS生成內(nèi)容的屏幕讀者會大聲讀出來猖闪，這樣會導(dǎo)致UX的效果更加糟糕。
使用CSS生成內(nèi)容是為了裝飾或者一些不太重要的信息肌厨，但是屏幕讀者要正確使用培慌，這樣可以保證擁有輔助技術(shù)的人不會混亂。在決定是否使用CSS合成內(nèi)容時要思考一下“漸進增強”（Progressive Enhancement）柑爸。
實驗性偽類和偽元素
一個偽類或偽元素是實驗性的是指它的規(guī)格不是固定的吵护，它的句法和行為是可以改變的。
然而我們現(xiàn)在可以通過應(yīng)用瀏覽器引擎前綴來是用偽類和偽元素表鳍。要做到這一點馅而，我們可以參考http://caniuse.com/或者一些自動前綴的工具，例如自由前綴或者自動前綴譬圣。
在這篇文章中你會看到緊鄰偽類和偽元素名稱的實驗性標簽瓮恭。
偽類
當(dāng)用戶執(zhí)行一個動作時，狀態(tài)偽類會起作用厘熟。在連接還未被瀏覽時屯蹦，CSS中的"action"也可以寫成“no action”。
讓我們來看一下盯漂。
:LINK
偽類link:是鏈接的正常狀態(tài)颇玷，通常是用來識別未被訪問過的鏈接。在分類中的其偽類沒有被識別前要生命：link,這四個的順序是這樣的:link, :visited, :hover,: active.Visited
:Visited 這個偽類用于已經(jīng)被訪問過的鏈接就缆。按順序吧：visited這個軟件放在第二位（放在：link之后）
:HOVER
當(dāng)用戶的指針指到時帖渠，hover用于定義元素的樣式。不必把鏈接加到hover上竭宰，盡管這是一種常用的方法空郊。
hover應(yīng)該位于第三位（放在偽類：visited之后）
:ACTIVE
：active這個偽類是用于定義一個被“激活”的元素或者一個指定的設(shè)備，或者一個觸屏設(shè)備的按鍵切揭，它可以被鍵盤激活狞甚，就像：foucus一樣。
它的運行和:foucus 類似廓旬，不同之處在于：：active是點擊鼠標和松開鼠標時起作用哼审。
它應(yīng)該排在第四位，位于：hover之后
:FOCUS
偽類：focus是用來定義一個元素的樣式的孕豹，它已經(jīng)從指定設(shè)備涩盾，觸屏設(shè)備的界面或者鍵盤中獲得focus，是用來很多形式元素励背。
BONUS CONTENT: A SASS MIXIN FOR LINKS
如果你處理過CSS中的預(yù)處理程序春霍，比如像Sass，那么bonus content可能會引發(fā)你的興趣叶眉。
如果你對CSS預(yù)處理程序沒有興趣---沒關(guān)系---你可以直接跳轉(zhuǎn)到結(jié)構(gòu)性的偽類部分址儒。
秉著使工作流程最優(yōu)化的精神芹枷，下面是一個Sass mixin,我們可以創(chuàng)建一組基礎(chǔ)的鏈接。
在mixin背后的想法是在討論中沒有聲明缺省莲趣。所以鸳慈，我們是被動的，去聲明鏈接的4個階段妖爷。
:focus 和：active通常都是一塊聲明的蝶涩，如果你想要分開理朋，也可以分開絮识。注意一點：mixin是可以應(yīng)用于任何HTML元素中的，而不只是links嗽上。
結(jié)構(gòu)性偽類：
結(jié)構(gòu)性偽類以文件樹或者dom 樹種的傳統(tǒng)信息為目標次舌，它不可以用其他類型的選擇器或者配合器所代替。
::FIRST-LETTER
First-letter是選擇一行文本中的第一個字母兽愤，如果一個元素包含在這一行的前面彼念，例如圖片、視頻或者表格浅萧，那么首字母不會受影響并且可以被選擇出來逐沙。
它的這個特性可以用于段落當(dāng)中，例如洼畅，無需借助圖片或外部性能就增強排版的美觀度吩案。
::FIRST-LINE
Firs-line 是用于定位元素中的第一行，它只在塊級元素中起作用帝簇。
當(dāng)用于段落的時候徘郭，只有第一行會有樣式，即使文本會轉(zhuǎn)行丧肴。
::SELECTION
：selection 是用于定義文本中被強調(diào)出來的那部分的樣式的残揉。
::PLACEHOLDER
：placeholder 是利用HTML中的placeholder 特性來定位用于造型元素中的占位符文本。
It can also be written as ::input-placeholder, which is actually the syntax used in CSS.
它也可以寫成 ::input-placeholder芋浮，這實際上是CSS中的句法抱环。
總結(jié)
CSS中的偽類和偽元素是不是很有用？他們的確給人們帶來了滿足感纸巷，但是這也是一個網(wǎng)絡(luò)設(shè)計者和開發(fā)者的生活镇草。
請確保徹底測試徹底，但是真正應(yīng)用偽類和偽元素還有很長的路要走何暇。希望你能從這篇文章中有所收獲陶夜！同時不要忘記給它創(chuàng)建書簽哦。
----
文/切版網(wǎng)（www.qieban.cn）
