整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來
熟悉前端的人都會聽過css的偽類與偽元素，然而大多數(shù)的人都會將這兩者混淆。本文從解析偽類與偽元素的含義出發(fā)，區(qū)分這兩者的區(qū)別，即使你有用過偽類與偽元素，但里面總有一兩個你沒見過的吧。
先說一說為什么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引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素。下面分別對偽類和偽元素進行解釋。
偽類用于當已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態(tài)。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類。
偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。
這里通過兩個例子來說明兩者的區(qū)別。
下面是一個簡單的html列表片段：
<ul> <li>我是第一個</li> <li>我是第二個</li> </ul>
如果想要給第一項添加樣式，可以在為第一個<li>添加一個類，并在該類中定義對應(yīng)樣式：
如果不用添加類的方法，我們可以通過給設(shè)置第一個<li>的:first-child偽類來為其添加樣式。這個時候，被修飾的<li>元素依然處于文檔樹中。
下面是另一個簡單的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設(shè)置該span元素的樣式：
如果不創(chuàng)建一個<span>元素，我們可以通過設(shè)置<p>的:first-letter偽元素來為其添加樣式。這個時候，看起來好像是創(chuàng)建了一個虛擬的<span>元素并添加了樣式，但實際上文檔樹中并不存在這個<span>元素。
從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個文檔數(shù)外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個文檔樹之外的元素。
CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素，以此來區(qū)分偽元素和偽類，比如::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標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。
實際上，偽元素使用單冒號還是雙冒號很難說得清誰對誰錯，你可以按照個人的喜好來選擇某一種寫法。
這一章以含義解析和例子的方式列出大部分的偽類和偽元素的具體用法。下面是根據(jù)用途分類的偽類總結(jié)圖和根據(jù)冒號分類的偽元素總結(jié)圖：
某些偽類或偽元素仍然處于試驗階段，在使用前建議先在Can I Use等網(wǎng)站查一查其瀏覽器兼容性。處于試驗階段的偽類或偽元素會在標題中標注。
想了解更多CSS選擇器，請點擊：CSS選擇器如此之多，你了解多少？
喜歡小編的點擊關(guān)注，了解更多知識！
果您是一個網(wǎng)頁設(shè)計和開發(fā)者的老手，我想你肯定使用過偽類和偽元素。但我還是建議你去查看一下目錄表，可能其中的一兩項你之前沒有聽說過。
偽類在W3C上的技術(shù)定義不是特別復(fù)雜，它基本上是一個服務(wù)于CSS的虛擬的聲明或者元素的一個具體特性。一些常用的偽類有：link, :visited, :hover, :active, :first-child 和 :nth-child。還有很多，我們一時看不完。
偽類通常是要以冒號開頭（：），然后是偽類的名稱，有時也會在括號里賦值。
現(xiàn)在，偽元素和真元素是一樣的了，我們可以把其當做HTML中的常用元素來使用。但它并不在文件樹或者dom中，這就是說我們不能對他們進行分類，只能利用CSS來創(chuàng)建。
我會在文章的最后談一下一些常見的偽元素：after；before；fisrt letter.
偽元素用單冒號還是雙冒號？
把雙冒號（：：）引入CSS3是為了使偽元素：：before,::after和類似于：hover, :active區(qū)分開來.除了IE8及以下版本，所有瀏覽器都支持偽元素中的雙引號。
也有一些偽元素只支持雙冒號，例如：：backdrop
就切版網(wǎng)而言，我們會使用單冒號標記，因為這樣可以向后兼容傳統(tǒ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)容的屏幕讀者會大聲讀出來，這樣會導致UX的效果更加糟糕。
使用CSS生成內(nèi)容是為了裝飾或者一些不太重要的信息，但是屏幕讀者要正確使用，這樣可以保證擁有輔助技術(shù)的人不會混亂。在決定是否使用CSS合成內(nèi)容時要思考一下“漸進增強”（Progressive Enhancement）。
實驗性偽類和偽元素
一個偽類或偽元素是實驗性的是指它的規(guī)格不是固定的，它的句法和行為是可以改變的。
然而我們現(xiàn)在可以通過應(yīng)用瀏覽器引擎前綴來是用偽類和偽元素。要做到這一點，我們可以參考http://caniuse.com/或者一些自動前綴的工具，例如自由前綴或者自動前綴。
在這篇文章中你會看到緊鄰偽類和偽元素名稱的實驗性標簽。
偽類
當用戶執(zhí)行一個動作時，狀態(tài)偽類會起作用。在連接還未被瀏覽時，CSS中的"action"也可以寫成“no action”。
讓我們來看一下。
:LINK
偽類link:是鏈接的正常狀態(tài)，通常是用來識別未被訪問過的鏈接。在分類中的其偽類沒有被識別前要生命：link,這四個的順序是這樣的:link, :visited, :hover,: active.Visited
:Visited 這個偽類用于已經(jīng)被訪問過的鏈接。按順序吧：visited這個軟件放在第二位（放在：link之后）
:HOVER
當用戶的指針指到時，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是選擇一行文本中的第一個字母，如果一個元素包含在這一行的前面，例如圖片、視頻或者表格，那么首字母不會受影響并且可以被選擇出來。
它的這個特性可以用于段落當中，例如，無需借助圖片或外部性能就增強排版的美觀度。
::FIRST-LINE
Firs-line 是用于定位元素中的第一行，它只在塊級元素中起作用。
當用于段落的時候，只有第一行會有樣式，即使文本會轉(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）
偽類對元素進行分類是基于特征(characteristics)而不是它們的名字、屬性或者內(nèi)容；原則上特征是不可以從文檔樹上推斷得到的。
偽類有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first何為偽類?就是css內(nèi)植類css內(nèi)部本身賦予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿來使用，當然你也可以改變它的部分屬性比如：a:link{color:#FF0000;}CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全用在超鏈接上的偽類。
CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全使用的用在連接上的CSS偽類。
◆link用在為訪問的連接上。
◆visited用在已經(jīng)訪問過的連接上。
◆hover用于鼠標光標置于其上的連接。
◆active用于獲得焦點(比如，被點擊)的連接上。
例如：
ExampleSourceCode
a:link{color:red}a:visited{color:green}a:hover{color:blue}a:active{color:orange}JavaScript的原型中存在諸多矛盾。某些看起來有點像基于類的語言的復(fù)雜語法問題遮蔽了它的原型機制。它不讓對象直接從其他對象繼承，反而插入了一個多余的間接層，從而使構(gòu)造函數(shù)產(chǎn)生對象。
當一個函數(shù)對相被創(chuàng)建時，F(xiàn)unction構(gòu)造器產(chǎn)生的函數(shù)對象會運行類似遮掩的一些代碼：
this.prototype=｛constructor：this｝；
新函數(shù)對象被賦予一個prototype蘇花型，其值是包含 一個constructor屬性且屬性值為新函數(shù)對象。該Prototype對象是存放繼承特征的地方。因為JavaScript語言沒有提供一種方法去確定哪個函數(shù)是打算用來作結(jié)構(gòu)的，所以每個函數(shù)都會得到一個Prototype對象。
constructor屬性沒什么用。重要的是Prototype對象。當采用構(gòu)造器調(diào)用模式，即使用new前綴去調(diào)用一個函數(shù)時，這將修改函數(shù)執(zhí)行的方式。如果new 運算符是一個方法而不是一個運算符，它可能會像這樣執(zhí)行：
我們也可以定義一個構(gòu)造器擴充它的原型：
現(xiàn)在我們可以構(gòu)造一個實例：
我們可以構(gòu)造另外一個偽類來繼承Mammal，這是通過定義它的constructor函數(shù)并替換它的prototype為一個Mammal的實例來實現(xiàn)的：
偽類模式本意是想面向?qū)ο罂繑n，但它看起來格格不入。我們可以隱藏一些不好的細節(jié)，這是通過使用method方法定義一個inherits方法來實現(xiàn)的：
我們的inherits和method方法都返回this，這將允許我們可以以級聯(lián)的樣式編程。可以只用一行語句構(gòu)造我們的Cat：
本人自創(chuàng)的一個小群：621071874，如有交流討論都可以進來暢談JS
本人創(chuàng)建的一個交流學習群：621071874，歡迎大牛，小白進群討論學習。
“偽類”形式可以給不熟悉JavaScript的程序員提供便利，但是也隱藏了該語言的真實本質(zhì)，借鑒類的表示法可能誤導程序員去編寫國語深入與復(fù)雜的層次結(jié)構(gòu)。許多復(fù)雜的類層次結(jié)構(gòu)產(chǎn)生的原因就是靜態(tài)類型檢查的約束。JavaScript完全拜托了那些約束。在基于類的語言中，類的繼承是代碼重要的唯一方式。JavaScript悠著更多更好的選擇。
最后，不知道各位程序員對偽類有什么看法，請多多指教。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
