最全的css3僞類和僞元素詳解

若是您是一個網頁設計和開發者的老手，我想你確定使用過僞類和僞元素。但我仍是建議你去查看一下目錄表，可能其中的一兩項你以前沒有據說過。

僞類在W3C上的技術定義不是特別複雜，它基本上是一個服務於CSS的虛擬的聲明或者元素的一個具體特性。一些經常使用的僞類有：link, :visited, :hover, :active, :first-child 和 :nth-child。還有不少，咱們一時看不完。

僞類一般是要以冒號開頭（：），而後是僞類的名稱，有時也會在括號裏賦值。

如今，僞元素和真元素是同樣的了，咱們能夠把其當作HTML中的經常使用元素來使用。但它並不在文件樹或者dom中，這就是說咱們不能對他們進行分類，只能利用CSS來建立。

我會在文章的最後談一下一些常見的僞元素：after；before；fisrt letter.

僞元素用單冒號仍是雙冒號？

把雙冒號（：：）引入CSS3是爲了使僞元素：：before,::after和相似於：hover, :active區分開來.除了IE8及如下版本，全部瀏覽器都支持僞元素中的雙引號。

也有一些僞元素只支持雙冒號，例如：：backdrop

就切版網而言，咱們會使用單冒號標記，由於這樣能夠向後兼容傳統瀏覽器；固然，若是要求使用雙冒號標記，我也會在僞類中使用雙冒號的。

你能夠自由選擇哪種標記，沒有絕對的對與錯。

然而，在寫這篇文章的時候，說明書要使用單冒號標記，緣由就是我上面提到過的向後兼容性。

注意，新的CSS寫僞元素的方法是使用雙冒號的，例如：a::after{...},這樣可使他們和僞類區分開來，有時你能夠在CSS中看到。可是CSS3依然容許使用單冒號的僞元素，就爲了是僞類向後兼容，如今咱們已然建議你堅持這種句法。

在這篇文章的標題中，支持兩種冒號的僞元素會用兩種方式標記出來，只支持雙冒號的僞元素就以雙冒號的形式呈現。

何時使用（不使用）生成內容呢？

生成內容是經過鏈接CSS特性中的content和僞元素中的：before或：after來實現的。

這個content多是純文本或者是一個容器，這些使咱們能夠經過CSS來呈現出的一個生動的模塊或者裝飾性的元素。這裏，我指的是第一種形式----文本。

若是爲了裝飾而使用過多的生成內容，那些支持CSS生成內容的屏幕讀者會大聲讀出來，這樣會致使UX的效果更加糟糕。

使用CSS生成內容是爲了裝飾或者一些不過重要的信息，可是屏幕讀者要正確使用，這樣能夠保證擁有輔助技術的人不會混亂。在決定是否使用CSS合成內容時要思考一下「漸進加強」（Progressive Enhancement）。

實驗性僞類和僞元素

一個僞類或僞元素是實驗性的是指它的規格不是固定的，它的句法和行爲是能夠改變的。

然而咱們如今能夠經過應用瀏覽器引擎前綴來是用僞類和僞元素。要作到這一點，咱們能夠參考http://caniuse.com/或者一些自動前綴的工具，例如自由前綴或者自動前綴。

在這篇文章中你會看到緊鄰僞類和僞元素名稱的實驗性標籤。

僞類

當用戶執行一個動做時，狀態僞類會起做用。在鏈接還未被瀏覽時，CSS中的"action"也能夠寫成「no action」。

讓咱們來看一下。

:LINK

僞類link:是連接的正常狀態，一般是用來識別未被訪問過的連接。在分類中的其僞類沒有被識別前要生命：link,這四個的順序是這樣的:link, :visited, :hover,: active.Visited

:Visited 這個僞類用於已經被訪問過的連接。按順序吧：visited這個軟件放在第二位（放在：link以後）

:HOVER

當用戶的指針指到時，hover用於定義元素的樣式。沒必要把連接加到hover上，儘管這是一種經常使用的方法。

hover應該位於第三位（放在僞類：visited以後）

:ACTIVE

：active這個僞類是用於定義一個被「激活」的元素或者一個指定的設備，或者一個觸屏設備的按鍵，它能夠被鍵盤激活，就像：foucus同樣。

它的運行和:foucus 相似，不一樣之處在於：：active是點擊鼠標和鬆開鼠標時起做用。

它應該排在第四位，位於：hover以後

:FOCUS

僞類：focus是用來定義一個元素的樣式的，它已經從指定設備，觸屏設備的界面或者鍵盤中得到focus，是用來不少形式元素。

BONUS CONTENT: A SASS MIXIN FOR LINKS

若是你處理過CSS中的預處理程序，好比像Sass，那麼bonus content可能會引起你的興趣。

若是你對CSS預處理程序沒有興趣---不要緊---你能夠直接跳轉到結構性的僞類部分。

秉着使工做流程最優化的精神，下面是一個Sass mixin,咱們能夠建立一組基礎的連接。

在mixin背後的想法是在討論中沒有聲明缺省。因此，咱們是被動的，去聲明連接的4個階段。

:focus 和：active一般都是一塊聲明的，若是你想要分開，也能夠分開。注意一點：mixin是能夠應用於任何HTML元素中的，而不僅是links。

結構性僞類：

結構性僞類以文件樹或者dom 樹種的傳統信息爲目標，它不能夠用其餘類型的選擇器或者配合器所代替。

::FIRST-LETTER

First-letter是選擇一行文本中的第一個字母，若是一個元素包含在這一行的前面，例如圖片、視頻或者表格，那麼首字母不會受影響而且能夠被選擇出來。

它的這個特性能夠用於段落當中，例如，無需藉助圖片或外部性能就加強排版的美觀度。

::FIRST-LINE

Firs-line 是用於定位元素中的第一行，它只在塊級元素中起做用。

當用於段落的時候，只有第一行會有樣式，即便文本會轉行。

::SELECTION

：selection 是用於定義文本中被強調出來的那部分的樣式的。

::PLACEHOLDER

：placeholder 是利用HTML中的placeholder 特性來定位用於造型元素中的佔位符文本。

It can also be written as ::input-placeholder, which is actually the syntax used in CSS.

它也能夠寫成 ::input-placeholder，這其實是CSS中的句法。

總結

CSS中的僞類和僞元素是否是頗有用？他們的確給人們帶來了知足感，可是這也是一個網絡設計者和開發者的生活。

請確保完全測試完全，可是真正應用僞類和僞元素還有很長的路要走。但願你能從這篇文章中有所收穫！同時不要忘記給它建立書籤哦。

----

文/切版網（www.qieban.cn）