僞類與僞元素

 

僞類：
僞類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具備的特性，而不是元素的id、class、屬性等靜態的標誌。因爲狀態是動態變化 的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和class有些相似，但它 是基於文檔以外的抽象，因此叫僞類。
:first-child
:link:
:visitive
:hover
:active
:focus
:lang

僞元素：
與僞類針對特殊狀態的元素不一樣的是，僞元素是對元素中的特定內容進行操做，它所操做的層次比僞類更深了一層，也所以它的動態性比僞類要低得多。實 際上，設計僞元素的目的就是去選取諸如元素內容第一個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器沒法完成的工做。它控制的內容實際上和元 素是相同的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此叫僞元素。
:first-line
first-letter
:before
:after

<!--------------------------------------------------------------------------------->

:link

僞類將應用於未被訪問過的連接，與:visited互斥。

:hover

僞類將應用於有鼠標指針懸停於其上的元素。

:active

僞類將應用於被激活的元素，如被點擊的連接、被按下的按鈕等。

:visited

僞類將應用於已經被訪問過的連接，與:link互斥。

:focus

僞類將應用於擁有鍵盤輸入焦點的元素。

:first-child

僞類將應用於元素在頁面中第一次出現的時候。

:lang

僞類將應用於元素帶有指定lang的狀況。

:first-letter

僞元素的樣式將應用於元素文本的第一個字（母）。

:first-line

僞元素的樣式將應用於元素文本的第一行。

:before

在元素內容的最前面添加新內容。

:after

在元素內容的最後面添加新內容。

CSS中存在一些比較特殊的屬性，稱之爲僞類，它們之中最經常使用的就是定義連接的僞:link，:visited，:hover，:active等。

    除了它們，還有一些不被常使用的僞類，有:focus，:first-child，:lang等。

    並且CSS裏不光有僞類，還有僞元素，好比：:first-letter，:first-line，:before和:after。

    ?本文中其它僞元素暫且不表，單說:after僞元素。

    after顧名思義是在元素後面的意思，實質是在元素以後添加內容。

    這個僞元素容許製做人員在元素內容的最後面插入生成內容，須要和content屬性一塊兒使用，設置在對象後發生的內容。默認地，這個僞元素是inline行內元素，不過可使用屬性 display 改變這一點。 

    全部主流瀏覽器都支持 :after 僞元素，但對於IE來講，只有IE8以上版本支持。 

    下面舉個例子，在CSS代碼中插入：

<style type="text/css"> h1:after {content:url(logo.gif)} </style> 
<h1>標題內容</h1>

    在顯示時，標題內容後會插入一張圖片。這就是僞元素:after的做用。

:after僞類的content還能夠跟其它的參數，

一：字符串  例如：

1 <style type="text/css"> 2 .test:after{content:"測試代碼"}; 3 </style> 4 <div class="test">測試div：</div>

運行結果顯示爲：測試div：測試代碼

二：attr(x)，attr是屬性的意思，顧名思義，就是讀取該類節點的屬性  例如：

1 <style type="text/css"> 2 .test:after{content:attr(id)}; 3 </style> 4 <div class="test" id="aaa">測試div的id爲：</div>

運行結果顯示爲：測試div的id爲：aaa

三：固定參數

close-quote：插入 quotes 屬性的後標記

no-close-quote ：並不插入 quotes 屬性的後標記。但增長其嵌套級別

open-quote：插入 quotes 屬性的前標記

no-open-quote：並不插入 quotes 屬性的前標記。但減小其嵌套級別