論CSS3僞元素（::）與僞類（:）的差別

在CSS1，CSS2中，大家或多或少的用過 :hover，:visited, :before, :after。CSS1和CSS2中對僞類的僞元素的差別比較模糊，甚至經常有同行将:before、:after稱為僞類。CSS3對這兩個概念做了相對較清晰地概念，并且在文法上也很明顯的講二者差別開。

僞類-pseudo classes

CSS 僞類用于向某些選擇器添加特殊的效果

它并不改變任何DOM内容。隻是插入了一些修飾類的元素，這些元素對于使用者來說是可見的，但是對于DOM來說不可見。僞類的效果可以通過添加一個實際的類來達到

舉例：

• a:link {color: #FF0000}
• a:visited {color: #00FF00}
• a:hover {color: #FF00FF}
• a:active {color: #0000FF}

  

注：僞類名字對大小寫不敏感，但在定義順序上有要求。:hover 必須被置于 :link 和 :visited 之後才是有效的，:active 必須被置于 :hover 之後才是有效的。L-V-H-A順序不能變

例：

<style type="text/css">
a:link { color: #FF0000; text-decoration: none; }
a:visited { color: #00FF00; text-decoration: none; }
a:hover { color: #FF00FF; }
a:active { color: #0000FF; }
</style>
           

小結：由于狀态是動态變化的，是以一個元素達到一個特定狀态時，它可能得到一個僞類的樣式；當狀态改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，是以叫僞類。

結構性僞類選擇器

1. 四個最基本的：root、not、empty、target
2. first-child、last-child、nth-child、nth-last-child、
3. nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
4. nth-of-type、nth-last-of-type
5. 循環使用樣式

:root()選擇器，從字面上我們就可以很清楚的了解是根選擇器，他的意思就是比對元素E所在文檔的根元素。在HTML文檔中，根元素始終是。“:root”選擇器等同于元素

:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。

:empty()選擇器表示的就是空。用來選擇沒有任何内容的元素，這裡沒有内容指的是一點内容都沒有，哪怕是一個空格。

:target()選擇器來對頁面某個target元素(該元素的id被當做頁面中的超連結來使用)指定樣式，該樣式隻在使用者點選了頁面中的超連結，并且跳轉到target元素後起作用

:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點了解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

:nth-child()選擇某個元素的一個或多個特定的子元素；

:nth-child(length);/參數是具體數字/

:nth-child(n);/*參數是n,n從0開始計算*/
       :nth-child(n*length)/*n的倍數選擇，n從0開始算*/
       :nth-child(n+length);/*選擇大于length後面的元素*/
       :nth-child(-n+length)/*選擇小于length前面的元素*/
       :nth-child(n*length+);/*表示隔幾選一*/
        //上面length為整數
           

:nth-last-child()從某父元素的最後一個子元素開始計算，來選擇特定的元素。

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它隻計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常友善和有用的。

“:only-child”表示的是一個元素是它的父元素的唯一一個子元素。

UI狀态元素僞類選擇器

E:checked ： {attribute}

比對所有使用者界面（form表單）中處于選中狀态的元素E

E:enabled ： {attribute}

比對所有使用者界面（form表單）中處于可用狀态的E元素

E:disabled ： {attribute}

比對所有使用者界面（form表單）中處于不可用狀态的E元素

E::selection ： {attribute}

比對E元素中被使用者選中或處于高亮狀态的部分

目标僞類

E:target ： {attribute}

比對相關URL指向的E元素

僞元素-Pseudo-elements

CSS 僞元素用于向某些選擇器設定特殊效果。

CSS3定義

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.

大意如下：

• 僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在于文檔語言裡的（可以了解為html源碼）。比如：documen接口不提供通路元素内容的第一個字或者第一行的機制，而僞元素可以使開發者可以提取到這些資訊。并且，一些僞元素可以使開發者擷取到不存在于源文檔中的内容（比如常見的::before,::after）。
• 僞元素的由兩個冒号::開頭，然後是僞元素的名稱。
• 使用兩個冒号::是為了差別僞類和僞元素（CSS2中并沒有差別）。當然，考慮到相容性，CSS2中已存的僞元素仍然可以使用一個冒号:的文法，但是CSS3中新增的僞元素必須使用兩個冒号::。

• 一個選擇器隻能使用一個僞元素，并且僞元素必須處于選擇器語句的最後。

  CSS2中的僞元素：:first-line,:first-letter,:before,:after;

`:first-line:`為某個元素的第一行文字使用樣式；
    `:first-letter:`為某個元素中的文字的首字母或第一個字使用樣式；
    `:before:`在某個元素之前插入一些内容；
    `:after:` 在某個元素之後插入一些内容；
           

css3中的僞元素

那麼在CSS3中，他對僞元素進行了一定的調整，在以前的基礎上增加了一個“：”也就是現在變成了::first-letter,::first-line,::before,::after另外他還增加了一個::selection。

::selection用來改變浏覽網頁選中文的預設效果

::before和::after這兩個主要用來給元素的前面或後面插入内容，這兩個常用”content”配合使用，見過最多的就是清除浮動，

.clearfix::after{
    content: '.';
    diaplay:block;
    width: ;
    height:;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: ;}//zoom(IE轉有屬性)可解決ie6,ie7浮動問題 

           

小結：簡單來說，僞元素建立了一個虛拟容器，這個容器不包含任何DOM元素，但是可以包含内容。另外，開發者還可以為僞元素定制樣式。

最後，總結一下僞類與僞元素的特性及其差別：

僞類本質上是為了彌補正常CSS選擇器的不足，以便擷取到更多資訊；

僞元素本質上是建立了一個有内容的虛拟容器；

CSS3中僞類和僞元素的文法不同；

可以同時使用多個僞類，而隻能同時使用一個僞元素；