CSS偽類
CSS偽類 -- Pseudo-Classes
CSS偽類是CSS選擇符的一部份
偽類名稱的大小寫敏感,敏感度依賴於文件的語言，在HTML文檔中大小寫不敏感，在xml文檔中大小寫敏感
偽類的英文為Pseudo-Classes
CSS中樣式和HTML文檔中元素的連接通常基於元素在文檔中的位置，這種方式滿足於大部分需求。不過由於HTML文件結構的限制，有些效果無法實現，例如，某些使用者行為引發的事件，以下是一些範例：
當使用者滑鼠移動到某個HTML元素上
#離開HTML元素
點擊HTML元素
偽類別可以用於文件狀態的改變、動態的事件等，例如使用者的滑鼠點擊某個元素、未被存取的連結
偽類別透過元素的名稱、屬性或內容三個特性對元素進行分類。原則上說是在HTML文件中無法取得的特性
CSS :link 偽類
:link -- CSS :link 偽類，適用於未被使用者造訪過的連結
語法: :link
CSS版本：CSS1
#說明：
適用於未被使用者造訪過的鏈接
用戶終端（例如：瀏覽器）通常區別顯示未訪問的鏈接與已訪問的鏈接，CSS提供偽類:link和:visited用以區分兩種狀態的鏈接
未訪問連結與已訪問連結是互斥的
link，中文"連結"的意思
#對指定連結設定顏色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
<p><a class="dreamdu" href="//m.sbmmt.com">点击跳转</a></p>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
</body>
</html>CSS :visited 偽類
語法: :visited
CSS版本：CSS1
#引用網址：http://www.dreamdu.com/css/pseudo -class_visited/
說明：
適用於已被使用者造訪過的連結
使用者終端機（例如：瀏覽器）通常會區別顯示未造訪的連結與已訪問的鏈接，CSS提供偽類:link和:visited用以區分兩種狀態的鏈接
未訪問鏈接與已訪問鏈接是互斥的
visited，中文"已訪問"的意思
語法
:visited
a:visited
a.class:visited
範例
# a:visited
{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
<p><a href="//m.sbmmt.com">点击跳转</a></p>
</body>
</html> CSS :hover 偽類
##說明：
適用於遊標（滑鼠指標）指向一個元素，但此元素未被啟動時
客戶端（瀏覽器）可以根據使用者與其互動的動作改變其渲染效果，CSS為此情況提供了三個偽類：hover、active、focus
上述三種偽類不是互斥的，一個元素同時可以適用其中的若干個
:hover偽類，適用於當使用者指向一個元素時，例如使用者的滑鼠指向一個段落p。當使用者滑鼠離開元素時，恢復元素原有的樣式顯示
hover，中文"停留、懸停"的意思
語法
:hover
a:hover
a.class:hover
實例
<!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="//m.sbmmt.com">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>anchor偽類別
在支援CSS 的瀏覽器中，連結的不同狀態都可以以不同的方式顯示
<!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">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>注意： 在CSS定義中，a:hover 必須被置於a:link 和a:visited 之後，才是有效的。
注意： 在 CSS 定義中，a:active 必須放在 a:hover 之後，才是有效的。
注意：偽類別的名稱不區分大小寫。
CSS :first-child 偽類別
#語法: :first-child
CSS版本：CSS2
引用網址：http://www.dreamdu.com/css/pseudo-class_first-child/
說明：
符合其它元素的第一個子元素，例如：在一個div中包含多個p元素，符合第一個p元素可使用:first-child偽類別
first，中文"第一的"的意思；child，中文"子代、子節點"的意思
語法
: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中文网</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>CSS :lang 偽類別注意：IE8必須聲明<!DOCTYPE>才能支援;lang偽類。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>
#
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 