CSS偽類
CSS偽類?-- Pseudo-Classes
CSS偽類是CSS選擇符的一部份
偽類名稱的大小寫(xiě)敏感,敏感度依賴於文件的語(yǔ)言，在HTML文檔中大小寫(xiě)不敏感，在xml文檔中大小寫(xiě)敏感
偽類的英文為Pseudo-Classes
CSS中樣式和HTML文檔中元素的連接通?；对卦谖臋n中的位置，這種方式滿足於大部分需求。不過(guò)由於HTML文件結(jié)構(gòu)的限制，有些效果無(wú)法實(shí)現(xiàn)，例如，某些使用者行為引發(fā)的事件，以下是一些範(fàn)例：
當(dāng)使用者滑鼠移動(dòng)到某個(gè)HTML元素上
#離開(kāi)HTML元素
點(diǎn)擊HTML元素
偽類別可以用於文件狀態(tài)的改變、動(dòng)態(tài)的事件等，例如使用者的滑鼠點(diǎn)擊某個(gè)元素、未被存取的連結(jié)
偽類別透過(guò)元素的名稱、屬性或內(nèi)容三個(gè)特性對(duì)元素進(jìn)行分類。原則上說(shuō)是在HTML文件中無(wú)法取得的特性
CSS :link 偽類
:link?-- CSS :link 偽類，適用於未被使用者造訪過(guò)的連結(jié)
語(yǔ)法:?:link
CSS版本：CSS1
#說(shuō)明：
適用於未被使用者造訪過(guò)的鏈接
用戶終端（例如：瀏覽器）通常區(qū)別顯示未訪問(wèn)的鏈接與已訪問(wèn)的鏈接，CSS提供偽類:link和:visited用以區(qū)分兩種狀態(tài)的鏈接
未訪問(wèn)連結(jié)與已訪問(wèn)連結(jié)是互斥的
link，中文"連結(jié)"的意思
#對(duì)指定連結(jié)設(shè)定顏色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 偽類示例，對(duì)指定鏈接設(shè)置顏色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a class="dreamdu" href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html>?CSS :visited 偽類
語(yǔ)法:?:visited
CSS版本：CSS1
#引用網(wǎng)址：http://www.dreamdu.com/css/pseudo -class_visited/
說(shuō)明：
適用於已被使用者造訪過(guò)的連結(jié)
使用者終端機(jī)（例如：瀏覽器）通常會(huì)區(qū)別顯示未造訪的連結(jié)與已訪問(wèn)的鏈接，CSS提供偽類:link和:visited用以區(qū)分兩種狀態(tài)的鏈接
未訪問(wèn)鏈接與已訪問(wèn)鏈接是互斥的
visited，中文"已訪問(wèn)"的意思
語(yǔ)法
:visited
a:visited
a.class:visited
範(fàn)例
# a:visited
{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 偽類示例，設(shè)置已訪問(wèn)鏈接的顏色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html>?CSS :hover 偽類
##說(shuō)明：
適用於遊標(biāo)（滑鼠指標(biāo)）指向一個(gè)元素，但此元素未被啟動(dòng)時(shí)
客戶端（瀏覽器）可以根據(jù)使用者與其互動(dòng)的動(dòng)作改變其渲染效果，CSS為此情況提供了三個(gè)偽類：hover、active、focus
上述三種偽類不是互斥的，一個(gè)元素同時(shí)可以適用其中的若干個(gè)
:hover偽類，適用於當(dāng)使用者指向一個(gè)元素時(shí)，例如使用者的滑鼠指向一個(gè)段落p。當(dāng)使用者滑鼠離開(kāi)元素時(shí)，恢復(fù)元素原有的樣式顯示
hover，中文"停留、懸停"的意思
語(yǔ)法
:hover
a:hover
a.class:hover
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 偽類示例</title>
<style type="text/css" media="all">
a:hover
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類</div>
</body>
</html>anchor偽類別
在支援CSS 的瀏覽器中，連結(jié)的不同狀態(tài)都可以以不同的方式顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :anchor 偽類示例</title>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">這是一個(gè)鏈接</a></b></p>
<p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴(yán)格按順序才能看到效果。</p>
<p><b>注意：</b> a:active 必須在 a:hover 之后。</p>
</body>
</html>注意：?在CSS定義中，a:hover 必須被置於a:link 和a:visited 之後，才是有效的。
注意：?在 CSS 定義中，a:active 必須放在 a:hover 之後，才是有效的。
注意：偽類別的名稱不區(qū)分大小寫(xiě)。
CSS :first-child 偽類別
#語(yǔ)法:?:first-child
CSS版本：CSS2
引用網(wǎng)址：http://www.dreamdu.com/css/pseudo-class_first-child/
說(shuō)明：
符合其它元素的第一個(gè)子元素，例如：在一個(gè)div中包含多個(gè)p元素，符合第一個(gè)p元素可使用:first-child偽類別
first，中文"第一的"的意思；child，中文"子代、子節(jié)點(diǎn)"的意思
語(yǔ)法
:first-child
E:first-child
E1>E2:first-child
範(fàn)例
p > code:first-child
{
#color:lime;
background:red;
##}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>這是個(gè)測(cè)試</p>
<p>這是個(gè)測(cè)試</p>
<p><b>注意:</b>對(duì)于 :first-child 工作于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.</p>
</body>
</html>CSS :lang 偽類別注意：IE8必須聲明<!DOCTYPE>才能支援;lang偽類。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在這個(gè)例子中,:lang定義了q元素的值為lang =“no”</p>
<p><b>注意:</b> 僅當(dāng) !DOCTYPE已經(jīng)聲明時(shí) IE8支持 :lang.</p>
</body>
</html>
#
