css 偽類的使用方法詳解

css 偽類這個詞很奇怪, 在我看來更像標識了特殊狀態的標籤.

和程式中的類什麼的, 一點關係都沒有.

偽類用:跟在選取器後面,標識了一些狀態

::表示 css3 新增的一些偽類, 建議全部都使用::.這年頭還不支援 css3 的瀏覽器可以不管了

比如這幾個偽類:

link 連結還沒被使用者點擊
visited 已經點擊的連結
hover 滑鼠指標懸停在連結上
active 連結正在被點擊（滑鼠在元素上按下，還沒有釋放）
::first-letter 給我感覺更像一個增強選取器

p::first-letter {font-size:300%;}
p::first-line {font-variant:small-caps;} 同上

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}

這個已經是改

CSS :active 偽類，適用於一個元素被啟用時的樣式

文法: :active
CSS版本：CSS1

說明：
適用於一個元素被啟用時的樣式，例如滑鼠在此元素的地區內按下但還沒有釋放時
用戶端（瀏覽器）可以根據使用者與其互動的動作改變其渲染效果，CSS為這種情況提供了三個偽類：hover、active、focus
上述三種偽類不是互斥的，一個元素同時可以適用其中的若干個
:active偽類，適用於一個元素被使用者啟用時，例如使用者在按下滑鼠之後放開滑鼠之前的這一段時間內。當使用者放開滑鼠後，恢複元素原有的樣式
active，中文"啟用、活躍"的意思

文法

:active
a:active
a.class:active
樣本

a:active
{
 color:yellow;
 background:blue;
 font-size:small;
}
p:active
{
 color:yellow;
 background:blue;
 font-size:large;
}
div:active
{
 color:red;
 background:lime;
 font-size:small;
}
CSS :active 偽類樣本 -- 可以嘗試編輯

CSS :active 偽類樣本
偽類選擇符的順序：L-V-H-A

CSS提供了四種元素設定連結的顏色，包括:link、:visited、:hover、:active，它們的聲明是有一定順序的，我們簡稱這種順序為L-V-H-A，即link最先，其次visited，之後hover，最後active，如此聲明才能保證hover與active狀態顯示正確的樣式

樣本

統一定義連結各種狀態下的樣式

a:link
{
 color:red;
}
a:visited
{
 color:green;
}
a:hover
{
 color:yellow;
 background:blue;
}
a:active
{
 color:lime;
 background:red;
}
CSS :active 偽類樣本 -- 可以嘗試編輯

CSS偽類樣本，統一定義連結各種狀態下的樣式
一個頁面可以定義多個連結樣式

可以在一個頁面定義多種連結樣式，例如下面樣本定義了灰色與白色兩種樣式的串連

.gray:hover,.gray:focus,.gray:active,.gray:link,.gray:visited
{
 color:#999;
}

.white:hover,.white:focus,.white:active,.white:link,.white:visited
{
 color:#000;
 font-weight:bold;
}
CSS :active 偽類樣本 -- 可以嘗試編輯

CSS偽類樣本，一個頁面定義多個連結樣式
IE瀏覽器不支援A元素以外的其它元素的:active偽類

IE6、IE7(Q)、IE8(Q)瀏覽器不支援A元素以外的其它元素的:active偽類

CSS3 target偽類

CSS3 target偽類是眾多實用的CSS3特性中的一個。它用來匹配文檔(頁面)的URI中某個標誌符的目標元素。具體來說，URI中的標誌符通常會包含一個”#”字元，然後後面帶有一個標誌符名稱，比如#respond，target就是用來匹配ID為respond的元素的。

現在在頁面中，點擊一個ID連結後，頁面只會跳轉到相應的位置，但是並不會有比較明顯的UI標識，使用:target偽類可以像:hover等偽類一樣對目標元素定義樣式。

瀏覽器支援

因為我們在討論CSS3，所以它現在被除了IE6-8以外的所有瀏覽器支援，但是IE9會支援這個偽類。這是相當遺憾的，但是這個現實並不影響你使用它。

如何使用:target

:target偽類和:hover、:link、:visited、:focus等偽類的用法是一樣的：

selector:target{ color:red; /other styles/ }

執行個體

讓我們通過一個簡單的例子來示範。比如我們在頁面中常常會用到tab，之前我們要用指令碼來實現，YUI、jQuery也都有這樣的外掛程式或者模組，但是現在我們用:target偽類就可以實現。

HTML結構：

標籤一
標籤二
標籤三
#### CSS3代碼：
/layout styles/ .tab_content { position: absolute;/set content box as absolute/ /other layout styles/ } #tab1:target, #tab2:target, #tab3:target { z-index: 1; }

原理想必大家都看懂了，就是將tab內容框設定為絕對位置，然後通過:target偽類調整其z-index。