css，css3中的偽類與虛擬元素區別總結

在學習CSS的過程中，特別容易搞混淆兩個概念： 偽類和虛擬元素。w3c中對兩者的定義為：CSS 偽類用於向某些選取器添加特殊的效果。CSS 虛擬元素用於將特殊的效果添加到某些選取器。偽類一開始單單只是用來表示一些元素的動態狀態，典型的就是連結的各個狀態(LVHA)。隨後CSS2標準擴充了其概念範圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。虛擬元素則代表了某個元素的子項目，這個子項目雖然在邏輯上存在，但卻並不實際存在於文檔樹中。下面就來聊聊CSS以及CSS3中偽類與虛擬元素的區別。

可以先學習php中文網相關的免費課程

1. 《CSS3從入門到精通教程》中 css3偽類別選取器 課程

2. 《黑馬程式員css視頻教程》中 偽類和虛擬元素 相關視頻教程

偽類與虛擬元素的區別

1. 關於CSS3中的偽類與虛擬元素的區別及注意事項

CSS3中的標準是偽類使用單冒號“:” 而虛擬元素使用雙冒號“::”（避免混淆） 但是在此之前無論是偽類還是虛擬元素都使用單冒號“:” 所以為了保證相容虛擬元素兩種使用方法都是可以的
但是低版本IE有雙冒號相容問題 ，所以以前編寫樣式的人們對於偽類和虛擬元素就乾脆統統使用單冒號 ，導致這種混淆一直延續下來。

2. CSS偽類和虛擬元素的區別

偽類的效果可以通過添加一個實際的類來達到，而虛擬元素的效果則需要通過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為虛擬元素的原因。虛擬元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而虛擬元素則用兩個冒號來表示。

3. CSS中的偽類與虛擬元素及二者間的區別說明

CSS偽類(Pseudoclasses)是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudoclass{property:value;}，簡單地用一個半形英文冒號(:)來隔開選擇符和偽類。
CSS很多的建議並沒有得到瀏覽器的支援，但有四個可以安全使用的用在串連上的CSS偽類。link用在為訪問的串連上。visited用在已經訪問過的串連上。hover用於滑鼠游標置於其上的串連。active用於獲得焦點(比如，被點擊)的串連上。

4. CSS中的虛擬元素及其與偽類的區別樣本介紹

我們知道隨著CSS規範進一步完善，新增的CSS虛擬元素越來越多，但是在日常開發中，我們常用的及瀏覽器支援情況比較樂觀的當數before和after了。但是我們在日常開發中使用的都是:after {content: ”;}來清除浮動，及新增一個元素（照顧到IE8瀏覽器這裡使用單冒號）。但是content的可取值有哪些呢？

5. css常用屬性虛擬元素和虛擬元素的總結

偽類一開始只是用來表示一些元素的動態狀態，典型的就是大家常用的連結的各個狀態（link、active、hover、visited），隨後css2標準
擴充了其概念範圍，使其成為了所有邏輯上存在但在文檔樹中卻無標識的“幽靈”分類。

虛擬元素則代表了某個元素的的子項目，這個子項目雖然邏輯上存在，但是並不實際上存在於文檔樹中，如我們平時用的after、before等。

6. 淺談CSS的偽類與虛擬元素

偽類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具有的特性，而不是元素的id、class、屬性等靜態標誌。由於狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文檔之外的抽象，所以叫偽類。

相關問答

1. 偽類和虛擬元素區別？

【相關推薦】

1. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》

2. php中文網免費教程：CSS 3.0參考手冊