css中的僞類和僞元素

僞類

僞類與類類似，但又沒有類附加標籤上。僞類分爲UI僞類和結構化僞類。

UI僞類

• :link(將樣式添加到未被訪問的連接上)

• :visted(將樣式已添加到訪問的連接上)

• :hover(將樣式添加到鼠標懸浮的元素上)

• :active(將樣式添加到被激活的元素上)

• :focus(將樣式添加到被選中的元素上)

結構化僞類

• :first-child(將樣式添加到第一個子元素上)

• :last-child(將樣式添加到最後一個子元素上)

僞元素

僞元素是在文檔中如有實無的元素。

主要有如下幾種

• :first-letter(將樣式添加到第一個字母)

• :first-line(將樣式添加到第一行)

• :before(在某些元素前面插入某些內容)

• :after(在某些元素後面插入某些內容)

看到:after，你們腦子裏應該都能浮現出那個清除浮動的CSS的吧。沒錯，就是這個。

?

1 2 3 4 5 6 7

.clearfix:after {      content : "." ;      display : block ;      height : 0 ;      visibility : hidden ;      clear : both ; }

區別

仔細琢磨下它們的定義。

僞類的實現就比如給這個標籤添加了一個虛擬的類。

舉個栗子：

?

1 2 3 4 5

a:hover{      font-size : 20px ;      color : red } <a href= "#" >Hello,World</a>

若不用僞類，實現一樣的效果，須要這麼作

?

1 2 3 4 5

.hover{      font-size : 20px ;      color : red } <a href= "#"  class= "hover" >Hello,World</a>

這麼一對比，」僞類「就顧名思義了啊。

而僞元素則比如添加了一個新的標籤。

?

1 2 3 4 5

p:first-letter{      font-size : 20px ;      color : red } <p>Hello,World</p>

若不用僞元素，實現一樣的效果，須要這麼作

?

1 2 3 4 5

.first-letter{      font-size : 20px ;      color : red } <p><span class= "first-letter" >H</span>ello,World</p>

所以總結下區分的方法：現實相同效果是須要添加一個類仍是一個元素標籤。

tips:

1.CSS3爲了區別僞類和僞元素，明確使用單冒號來表示僞類，雙冒號來表示僞元素。但爲兼容性考慮，目前基本仍是使用單冒號來表示。

2.搜索引擎不會搜索僞元素的信息。所以，不要經過僞元素添加你想讓搜索引擎索引的重要內容

參考資料：

《CSS設計指南》

詳解 CSS 屬性 - 僞類和僞元素的區別

http://www.jb51.net/css/67317.html