CSS偽類
CSS偽類?-- Pseudo-Classes
CSS偽類是CSS選擇符的一部分
偽類名稱的大小寫敏感,敏感性依賴于文檔的語(yǔ)言，在HTML文檔中大小寫不敏感，在xml文檔中大小寫敏感
偽類的英文為Pseudo-Classes
CSS中樣式和HTML文檔中元素的連接通常基于元素在文檔中的位置，這種方式滿足于大部分需求。不過(guò)由于HTML文檔結(jié)構(gòu)的限制，一些效果無(wú)法實(shí)現(xiàn)，例如，某些用戶行為引發(fā)的事件，下面是一些示例：
當(dāng)用戶鼠標(biāo)移動(dòng)到某個(gè)HTML元素上
離開(kāi)HTML元素
點(diǎn)擊HTML元素
偽類可以用于文檔狀態(tài)的改變、動(dòng)態(tài)的事件等，例如用戶的鼠標(biāo)點(diǎn)擊某個(gè)元素、未被訪問(wèn)的鏈接
偽類通過(guò)元素的名稱、屬性或內(nèi)容三個(gè)特性對(duì)元素進(jìn)行分類。原則上說(shuō)是在HTML文檔中無(wú)法獲得的特性
CSS :link 偽類
:link?-- CSS :link 偽類，適用于未被用戶訪問(wèn)過(guò)的鏈接
語(yǔ)法:?:link
CSS版本：CSS1
說(shuō)明：
適用于未被用戶訪問(wèn)過(guò)的鏈接
用戶終端（例如：瀏覽器）通常區(qū)別顯示未訪問(wèn)的鏈接與已訪問(wèn)的鏈接，CSS提供偽類:link和:visited用以區(qū)分兩種狀態(tài)的鏈接
未訪問(wèn)鏈接與已訪問(wèn)鏈接是互斥的
link，中文"鏈接"的意思
對(duì)指定鏈接設(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ō)明：
適用于已被用戶訪問(wèn)過(guò)的鏈接
用戶終端（例如：瀏覽器）通常區(qū)別顯示未訪問(wèn)的鏈接與已訪問(wèn)的鏈接，CSS提供偽類:link和:visited用以區(qū)分兩種狀態(tài)的鏈接
未訪問(wèn)鏈接與已訪問(wèn)鏈接是互斥的
visited，中文"已訪問(wèn)"的意思
語(yǔ)法
:visited
a:visited
a.class:visited
示例
a:visited
{
color: green;
}
上面定義已經(jīng)訪問(wèn)的鏈接樣式為green
文檔語(yǔ)言決定哪些元素是超鏈接的源鏈。例如，在HTML中，鏈接偽類適用于帶有href屬性的a元素。因此，下面的兩個(gè)CSS聲明是等價(jià)的
a:visited
{
?color: green;
}
:visited
{
color: green;
}
提示: 對(duì)于已經(jīng)訪問(wèn)的鏈接，瀏覽器會(huì)記錄訪問(wèn)的信息，查看下面示例前請(qǐng)先清空瀏覽器緩存的數(shù)據(jù)
<!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 偽類
適用于光標(biāo)（鼠標(biāo)指針）指向一個(gè)元素，但此元素未被激活時(shí)的樣式
語(yǔ)法:?:hover
CSS版本：CSS2
說(shuō)明：
適用于光標(biāo)（鼠標(biāo)指針）指向一個(gè)元素，但此元素未被激活時(shí)
客戶端（瀏覽器）可以根據(jù)用戶與其交互的動(dòng)作改變其渲染效果，CSS為這種情況提供了三個(gè)偽類：hover、active、focus
上述三種偽類不是互斥的，一個(gè)元素同時(shí)可以適用其中的若干個(gè)
:hover偽類，適用于當(dāng)用戶指向一個(gè)元素時(shí)，例如用戶的鼠標(biāo)指向一個(gè)段落p。當(dāng)用戶鼠標(biāo)離開(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 的瀏覽器中，鏈接的不同狀態(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ū)分大小寫。
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
示例
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 偽類
:lang 偽類使你有能力為不同的語(yǔ)言定義特殊的規(guī)則
注意：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>
