僞類和僞元素，review

老是分不太清楚，而後容易忘記這個概念，項目中又遇到了，複習一遍

問題

1.哪些經常使用的僞類？僞元素？

怎麼記：
除了4個僞元素，其餘都是僞類

哪四個僞元素？:before :after :first-letter :first-line

僞類
:first-child
:link
:visited
:hover
:active
等

2.僞類和僞元素的區別

想一想經常使用:before :after 用來幹嗎？

遇到的比較多的是在元素先後插入圖片，或者清除浮動

h1:before
  {
  content:url(logo.gif);
  }

<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

.clearfix:after{
    content:"";             /*設置內容爲空*/
    height:0;               /*高度爲0*/
    line-height:0;          /*行高爲0*/
    display:block;          /*將文本轉爲塊級元素*/
    visibility:hidden;      /*將元素隱藏*/
    clear:both;             /*清除浮動*/
}
.clearfix{
    zoom:1;                 /*爲了兼容IE*/
}

定義：

僞元素是創造文檔樹以外的對象。例如文檔不能提供訪問元素內容第一字或者第一行的機制。僞元素還提供一些在源文檔中不存在的內容分配樣式，例如:before和:after可以訪問產生的內容。

想一想經常使用僞類用來幹嗎？

匹配元素

a:link {color:#FF0000;} /* 未訪問的連接 */
a:visited {color:#00FF00;} /* 已訪問的連接 */
a:hover {color:#FF00FF;} /* 鼠標劃過連接 */
a:active {color:#0000FF;} /* 已選中的連接 */

選擇器匹配做爲任何元素的第一個子元素的 <p> 元素

p:first-child
{
    color:blue;
}

定義

僞類其實就是基於普通DOM元素而產生的不一樣狀態，他是DOM元素的某一特徵。

3.總結

一句話總結不一樣之處就是，僞元素產生新對象，在DOM樹中看不到，可是能夠操做；僞類不產生新的對象，僅是DOM中一個元素的不一樣狀態；

css3中，爲了區別和標準化，僞元素修改成以 :: 開頭，但由於歷史緣由，瀏覽器對以:開頭的僞元素也繼續支持，但建議規範書寫爲::開頭。

參考資料

文章1
文章2