CSS偽類?
CSS語法中偽類用于向某些選擇器添加特殊的效果。常見的偽類有：
(1)語法
? ? ? 偽類的語法：
? ? ? selector : pseudo-class {property: value}
? ? ? CSS 類也可與偽類搭配使用。
? ? ? selector.class : pseudo-class {property: value}
(2)錨偽類
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
~~~
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
~~~
完整的代碼為：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="../index.html" target="_blank">這是一個鏈接。</a></b></p>
<p><b>注釋：</b>在CSS定義中，a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！</p>
<p><b>注釋：</b>在CS 定義中，a:active 必須位于 a:hover 之后，這樣才能生效！</p>
</body>
</html>
~~~
運行的結果為：
1,瀏覽器從未訪問過的鏈接狀態為：
2,瀏覽器已訪問過的鏈接狀態為：
3,鼠標置在鏈接上的狀態為：
4,鼠標點擊后的鏈接的狀態為：
提示：
1,在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
2,在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。
3,偽類名稱對大小寫不敏感。
(3)偽類與 CSS 類
? ? ?偽類可以與 CSS 類配合使用：
? ? ?a.red : visited {color: #FF0000}
? ? ?<a class="red" href="css_syntax.asp">CSS Syntax</a>
? ? ?假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。
(4):first-child 偽類
您可以使用:first-child 偽類來選擇元素的第一個子元素。這個特定偽類很容易遭到誤解，所以有必要舉例來說明。考慮以下標記：
~~~
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
~~~
在上面的例子中，作為第一個元素的元素包括第一個 p、第一個 li 和 strong 和 em 元素。
給定以下規則：
~~~
p:first-child {color:red;}
li:first-child {color:blue;}
strong:first-child {color:green;}
em:first-child {color:yellow;}
~~~
第一個規則將作為某元素第一個子元素的所有 p 元素設置為紅色。第二個規則將作為某個元素（在 HTML 中，
這肯定是 ol 或 ul 元素）第一個子元素的所有 li 元素變成藍色。第三個規則將作為某元素第一個子元素的所有 strong
元素設置為綠色。第一個規則將作為某元素第一個子元素的所有em元素設置為黃色。
提示：最常見的錯誤是認為 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。
注釋：必須聲明 <!DOCTYPE>，這樣 :first-child 才能在 IE 中生效。
瀏覽器運行的結果為：
下面我們再來三個例子詳細說明：
例子 1 - 匹配第一個 < p> 元素
在下面的例子中，選擇器匹配作為任何元素的第一個子元素的 p 元素：
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html>
~~~
運行的結果為：
例子 2 - 匹配所有 < p> 元素中的第一個 < i> 元素
在下面的例子中，選擇器匹配所有 < p> 元素中的第一個 < i> 元素：
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
~~~
運行的結果為：
例子 3 - 匹配所有作為第一個子元素的 < p> 元素中的所有 < i> 元素
在下面的例子中，選擇器匹配所有作為元素的第一個子元素的 < p> 元素中的所有 < i> 元素：
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
~~~
運行的結果為：
(5):lang 偽類
:lang 偽類使你有能力為不同的語言定義特殊的規則。
在下面的例子中，:lang 類為屬性值為 no 的 q 元素定義引號的類型：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no" style="color:#FF0000">段落中的引用的文字</q>文字</p>
</body>
</html>
~~~
運行的結果為：
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化