僞元素與僞類

                                      僞元素與僞類

爲何要寫這篇文章？

　　僞元素和僞類一直都是很容易混淆的，沒有大量的實踐和用心去體會是不容易記住的。我相信對於絕大部分新手來講是這樣的，我本身也是常常記不住，像這樣不算難的問題，一直查閱別人的博文，沒有點本身的思想，好像是很low的一件事，所以寫下這篇文章。

 

什麼是僞類？

　　僞類的實質是把某種幻像類關聯到與僞類相關的元素上，舉個例子：

<div>
      <p>These are the necessary steps:</p>
</div>

　使用規則  p:first-child  { font-weight: bold; }，會將DIV的第一個子元素P字體變粗。

　　若是不使用僞類，咱們也但願達到以上效果，那麼咱們給P元素添加類名first-child,以下:

<div>
    <p class="first-child"> These are the necessary steps:</p>
</div>

　　使用規則 .first-child { font-weight: bold; }  能夠達到一樣的效果。

　　這也就是爲何叫作僞類，「類」字體如今好像存在於一個規則，與幻想的類名聯繫在一塊兒，而咱們能夠直接使用僞類，添加樣式，而不用先想好類名，而後再添加樣式。

　僞類的種類有：　　

　　　　連接僞類： :link,  :visited

　　　　動態僞類：  :focus,  :hover,  :active

           對第一個子元素:   :first-child

　　　　根據語言選擇：   :lang

 

什麼是僞元素？

　　僞元素可以在文檔中插入假想的元素，從而獲得某種效果。再使用上一個例子：

<div>
    <p> These are the necessary steps: </p>
</div>

　　使用規則p:first-letter { font-size: 200%; }  p元素的第一個字母大小是其他字母的兩倍。

　　而不使用僞元素，要達到一樣的效果，則須要使用新的標籤將p元素的第一個字母包裹起來，而後添加類名再添加樣式。

<div>
    <p>
         <i class="first-letter">T<i>
         hese  are necessary steps:
    </p>
</div>

　　使用規則 .first-letter { font-size: 200%; } 也能夠實現一樣的效果。

　　這也就是爲何叫僞元素了，「元素」體如今咱們能夠不添加額外的標籤（標籤也叫元素），就能夠直接給想要的字母添加樣式，就好像使用元素選擇器同樣。

　　常見的僞元素：

　　　　　　CSS2.1中定義了4個僞元素：設置首字母樣式（ :first-letter ），設置第一行樣式（ :first-line ），設置以前（ :before ）和以後元素（ :after ）的樣式

兩者的異同

　　相同的地方：①兩者都是與選擇器有關，有的書又叫僞類選擇器和僞元素選擇器。②參考《CSS3權威指南》，是這麼說的：  根據另外某種條件而非文檔結構向文檔中的某些部分應用樣式，並且沒法經過研究文檔的標記準確地推斷出採用何種方式應用樣式。

　　不一樣的地方：僞類爲某些元素（甚至是文檔自己）的狀態所指示的幻像類制定樣式。（強調元素，體現僞「類」）.

　　　　　　　　僞元素能夠爲文檔中不必定具體存在的結構制定樣式。（強調不必定具體存在，體現僞「元素"）.

僞元素的兼容性

　　在CSS3選擇器中已經將僞元素前面的一個冒號變爲兩個冒號了。在CSS2選擇器中，老的規範中，僞類和僞元素都是一個冒號，新規範爲了區分，僞元素統一用兩個冒號「::」。所以之後在寫CSS3時，推薦使用兩個冒號。僞類用一個冒號，這也算一個區別吧。