偽類與偽元素

css偽類的概念及作用

css偽類(pseudoclasses)是選擇符的螺栓，用來指定乙個或者與其相關的選擇符的狀態。它們的形式是selector:pseudoclass，簡單地用乙個半角英文冒號(:)來隔開選擇符和偽類。

css很多的建議並沒有得到瀏覽器的支援，但有四個可以安全使用的用在連線上的css偽類。

1.link用在為訪問的連線上。

2.visited用在已經訪問過的連線上。

3.hover用於滑鼠游標置於其上的連線。

4.active用於獲得焦點(比如，被點選)的連線上。

儘管css給予你繞開的控制權，用不同的顏色表示已經訪問過的連線是乙個很好的習慣，因為很多使用者還是這樣預期的。css偽類(除了hover)不常用，恐怕也沒有過去常用。因此，它沒有過去那樣有用了。但如果你能收集使用者的意見，你會發現應該使用它。

傳統上，連線文字是藍色的，已訪問的連線是紫色的。也許，這是最有效、最有用的顏色。然而，伴隨著css的廣泛發展，這種顏色不會是平常的了，使用者也不再假設連線必須是藍色或紫色的。

你應該也可以在除了連線的其他元素上使用hover偽類。不幸的是，internetexplore並不支援。這真是乙個極大的煩惱。

偽元素

實際上來說，css 中的偽元素在html上是不存在的，使用的時機通常都是針對某樣元素特殊處理時才會用到

常用的 pseudo-element：

::first-line

可以指定 p 元素第一行的樣式

::first-letter

可以指定 p 元素第乙個字的樣式

::selection

定義使用者反白後的效果

::before

在元素之前插入內容

::after

在元素之後插入內容

偽類和偽元素的區別：

首先，閱讀 w3c 對兩者的定義：

1.css 偽類用於向某些選擇器新增特殊的效果。

2.css 偽元素用於將特殊的效果新增到某些選擇器。

可以明確兩點，第一兩者都與選擇器相關，第二就是新增一些「特殊」的效果。這裡特殊指的是兩者描述了其他 css 無法描述的東西。

即我們給第乙個字母新增乙個 span，然後給 span 增加樣式。

兩者的區別已經出來了。那就是：

偽類的效果可以通過新增乙個實際的類來達到，而偽元素的效果則需要通過新增乙個實際的元素才能達到，這也是為什麼他們乙個稱為偽類，乙個稱為偽元素的原因。

總結

偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區分兩者，已經明確規定了偽類用乙個冒號來表示，而偽元素則用兩個冒號來表示