css偽類，虛擬元素，css偽類元素

css偽類，虛擬元素，css偽類元素

偽類作用於整個元素，比如：

a:link{color:#111;}                                 

a:hover{color:#222;}                              

div:first-child{color:#333;}

儘管這些條件都不是基於Dom的，但結果沒一個都是作用於一個完整的元素，比如整個連結，段落，div等等；

 

虛擬元素作用於元素一部分，比如：

p::first-line{color:#555;}

p::first-letter{color:#666;}

虛擬元素作用於元素的一部分，一個段落的第一行或者第一個字母；

 

:before於::before作用一樣，前者是css2的寫法，後者是css3的寫法

 

作用一：

:before和:after可以增加純css設計的複雜度，不需要多餘的標籤，我們可以使用虛擬元素添加額外的可樣式化的元素或層級。比如想在電話號碼字型前面加上一個電話的icon表徵圖，我們就可以這樣做：

.phoneNumber:before {

     content : "☎" ;      font-size : 15px ; } 作用二： 清除浮動 /* For modern browsers */ .cf:before, .cf:after {      content : "" ;      display :table; }    .cf:after {      clear : both ; }  /* For IE 6/7 (trigger hasLayout) */ .cf {      zoom: 1 ; } 這裡 :before 阻止了 top-margin 合并， :after則用於清除浮動