CSS中僞類與僞元素

前言

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

偽類與偽元素

先說一說為什麼css要引入偽元素和偽類，以下是css2.1 Selectors章節中對偽類與偽元素的描述：

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列表片段：

 
我是第一個

 
我是第二個

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

 
我是第一個

 
我是第二個

li.first-item {
 color: orange}
如果不用添加類的方法，我們可以通過給設置第一個
的:first-child偽類來為其添加樣式。這個時候，被修飾的 
元素依然處於文檔樹中。
li:first-child {
 color: orange}
下面是另一個簡單的html段落片段：
Hello World, and wish you have a good day!

如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，並設置該span元素的樣式：
	
Hello World, and wish you have a good day!

.first {
 font-size: 5em;}
如果不創建一個元素，我們可以通過設置
的:first-letter偽元素來為其添加樣式。這個時候，看起來好像是創建了一個虛擬的元素並添加了樣式，但實際上文檔樹中並不存在這個元素。
Hello World, and wish you have a good day!

p:first-letter { 

 font-size: 5em;}
從上述例子中可以看出，偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔數外的元素。因此，偽類與偽元素的區別在於：有沒有創建一個文檔樹之外的元素。
偽元素是使用單冒號還是雙冒號
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等網站查一查其瀏覽器兼容性。處於試驗階段的偽類或偽元素會在標題中標註。
鏈接：http://www.imooc.com/article/details/id/254506
 

                

            

            
            
            
            
            
            
            
            
            
            
            

            



分享到:



 閱讀更多  前端小學生 
的文章

關鍵字:
技術
HTML
偽類