擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

熟悉前端的人都會聽過css的偽類與偽元素，然而大多數的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發，區分這兩者的區別，即使你有用過偽類與偽元素，但里面總有一兩個你沒見過的吧。

偽類與偽元素

先說一說為什么css要引入偽元素和偽類，以下是w3c的描述：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

直譯過來就是：css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對偽類和偽元素進行解釋。

偽類用于當已有元素處于的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態下才能為元素添加樣式，所以將其稱為偽類。

偽元素用于創建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。

偽類與偽元素的區別

這里通過兩個例子來說明兩者的區別。

下面是一個簡單的html列表片段：

<ul>
 <li>我是第一個</li>
 <li>我是第二個</li>
</ul>

如果想要給第一項添加樣式，可以在為第一個<li>添加一個類，并在該類中定義對應樣式：

如果不用添加類的方法，我們可以通過給設置第一個<li>的:first-child偽類來為其添加樣式。這個時候，被修飾的<li>元素依然處于文檔樹中。

下面是另一個簡單的html段落片段：

<p>Hello World, and wish you have a good day!</p>

如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設置該span元素的樣式：

如果不創建一個<span>元素，我們可以通過設置<p>的:first-letter偽元素來為其添加樣式。這個時候，看起來好像是創建了一個虛擬的<span>元素并添加了樣式，但實際上文檔樹中并不存在這個<span>元素。

從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在于：有沒有創建一個文檔樹之外的元素。

偽元素是使用單冒號還是雙冒號

CSS3規范中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。

然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after也可以正確運行。

對于偽元素是使用單冒號還是雙冒號的問題，w3c標準中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。

實際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。

偽類與偽元素的具體用法

這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖：

某些偽類或偽元素仍然處于試驗階段，在使用前建議先在Can I Use等網站查一查其瀏覽器兼容性。處于試驗階段的偽類或偽元素會在標題中標注。

想了解更多CSS選擇器，請點擊：CSS選擇器如此之多，你了解多少？

公告

喜歡小編的點擊關注，了解更多知識！

果您是一個網頁設計和開發者的老手，我想你肯定使用過偽類和偽元素。但我還是建議你去查看一下目錄表，可能其中的一兩項你之前沒有聽說過。

偽類在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）

么是偽類？

偽類對元素進行分類是基于特征(characteristics)而不是它們的名字、屬性或者內容；原則上特征是不可以從文檔樹上推斷得到的。

偽類有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first何為偽類?就是css內植類css內部本身賦予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿來使用，當然你也可以改變它的部分屬性比如：a:link{color:#FF0000;}CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全用在超鏈接上的偽類。

偽類有什么作用？

CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全使用的用在連接上的CSS偽類。

◆link用在為訪問的連接上。

◆visited用在已經訪問過的連接上。

◆hover用于鼠標光標置于其上的連接。

◆active用于獲得焦點(比如，被點擊)的連接上。

例如：

ExampleSourceCode

a:link{color:red}a:visited{color:green}a:hover{color:blue}a:active{color:orange}

更多的理解？

JavaScript的原型中存在諸多矛盾。某些看起來有點像基于類的語言的復雜語法問題遮蔽了它的原型機制。它不讓對象直接從其他對象繼承，反而插入了一個多余的間接層，從而使構造函數產生對象。

當一個函數對相被創建時，Function構造器產生的函數對象會運行類似遮掩的一些代碼：

this.prototype=｛constructor：this｝；

新函數對象被賦予一個prototype蘇花型，其值是包含 一個constructor屬性且屬性值為新函數對象。該Prototype對象是存放繼承特征的地方。因為JavaScript語言沒有提供一種方法去確定哪個函數是打算用來作結構的，所以每個函數都會得到一個Prototype對象。

constructor屬性沒什么用。重要的是Prototype對象。當采用構造器調用模式，即使用new前綴去調用一個函數時，這將修改函數執行的方式。如果new 運算符是一個方法而不是一個運算符，它可能會像這樣執行：

我們也可以定義一個構造器擴充它的原型：

現在我們可以構造一個實例：

我們可以構造另外一個偽類來繼承Mammal，這是通過定義它的constructor函數并替換它的prototype為一個Mammal的實例來實現的：

偽類模式本意是想面向對象靠攏，但它看起來格格不入。我們可以隱藏一些不好的細節，這是通過使用method方法定義一個inherits方法來實現的：

我們的inherits和method方法都返回this，這將允許我們可以以級聯的樣式編程?？梢灾挥靡恍姓Z句構造我們的Cat：

本人自創的一個小群：621071874，如有交流討論都可以進來暢談JS

本人創建的一個交流學習群：621071874，歡迎大牛，小白進群討論學習。

“偽類”形式可以給不熟悉JavaScript的程序員提供便利，但是也隱藏了該語言的真實本質，借鑒類的表示法可能誤導程序員去編寫國語深入與復雜的層次結構。許多復雜的類層次結構產生的原因就是靜態類型檢查的約束。JavaScript完全拜托了那些約束。在基于類的語言中，類的繼承是代碼重要的唯一方式。JavaScript悠著更多更好的選擇。

最后，不知道各位程序員對偽類有什么看法，請多多指教。