DIV CSS 佈局教程網

一、偽類和偽元素的區別

1、偽類種類

2、偽元素種類

（1）偽類作用對象是整個元素

例如：

 
a:link
 {color:#111}
a:hover
 {color:#222}
div:first-child
 {color:#333}
div:nth-child(3)
 {color:#444}

盡管這些條件不是基於DOM的，但結果每一個都是作用於一個完整的元素，比如整個鏈接，段落，div等等。

（2）偽元素作用於元素的一部分

 
p::first-line
 {color:#555}
p::first-letter
 {color:#666}
a::before
 {content : "hello
 world";}

（3）偽元素作用於元素的一部分：一個段落的第一行或者第一個字母。

總結：偽元素其實相當於偽造了一個元素，例如before,first-letter達到的效果就是偽造了一個元素，然後添加了其相應的效果而已；而偽類沒有偽造元素，例如first-child只是給子元素添加樣式而已。

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

但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。