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參考手冊

#

以上是css，css3中的偽類與偽元素區別總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！