CSS元素選擇器

最常見的 CSS 選擇器是元素選擇器寂纪。換句話說(shuō)席吴，文檔的元素就是最基本的選擇器。

如果設(shè)置 HTML 的樣式捞蛋，選擇器通常將是某個(gè) HTML 元素抢腐，比如 p、h1襟交、em、a伤靠，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

CSS類型選擇器

在 W3C 標(biāo)準(zhǔn)中捣域，元素選擇器又稱為類型選擇器（type selector）。
“類型選擇器匹配文檔語(yǔ)言元素類型的名稱宴合。類型選擇器匹配文檔樹中該元素類型的每一個(gè)實(shí)例焕梅。”

下面的規(guī)則匹配文檔樹中所有 h1 元素：

h1 {font-family: sans-serif;}

CSS可以為HTML標(biāo)記語(yǔ)言添加樣式卦洽，也可以為XML語(yǔ)言添加樣式贞言。

通配符選擇器

CSS2 引入了一種新的簡(jiǎn)單選擇器 - 通配選擇器（universal selector），顯示為一個(gè)星號(hào)（*）阀蒂。該選擇器可以與任何元素匹配该窗，就像是一個(gè)通配符。
例如蚤霞，下面的規(guī)則可以使文檔中的每個(gè)元素都為紅色：

* {color: red;}

個(gè)聲明等價(jià)于列出了文檔中所有元素的一個(gè)分組選擇器酗失。利用通配選擇器，只需敲一次鍵（僅一個(gè)星號(hào)）就能使文檔中所有元素的 color 屬性值指定為 red昧绣。

選擇器分組

假設(shè)希望 h2 元素和p元素都有灰色规肴。為達(dá)到這個(gè)目的，最容易的做法是使用以下聲明：

h2, p {color:gray;}

將 h2 和 p 選擇器放在規(guī)則左邊，然后用逗號(hào)分隔拖刃，就定義了一個(gè)規(guī)則删壮。其右邊的樣式（color:gray;）將應(yīng)用到這兩個(gè)選擇器所引用的元素。逗號(hào)告訴瀏覽器兑牡，規(guī)則中包含兩個(gè)不同的選擇器央碟。如果沒有這個(gè)逗號(hào)，那么規(guī)則的含義將完全不同发绢。參見后代選擇器硬耍。

可以將任意多個(gè)選擇器分組在一起，對(duì)此沒有任何限制边酒。

例如经柴，如果您想把很多元素顯示為灰色，可以使用類似如下的規(guī)則：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

通過(guò)分組墩朦，創(chuàng)作者可以將某些類型的樣式“壓縮”在一起坯认，這樣就可以得到更簡(jiǎn)潔的樣式表。
以下的兩組規(guī)則能得到同樣的結(jié)果氓涣，不過(guò)可以很清楚地看出哪一個(gè)寫起來(lái)更容易：

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

聲明分組

我們既可以對(duì)選擇器進(jìn)行分組牛哺，也可以對(duì)聲明分組。

假設(shè)我們希望所有 h1 元素都有紅色背景劳吠，并使用 28 像素高的 Verdana 字體顯示為藍(lán)色文本引润，可以寫以下樣式：

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

但是上面這種做法的效率并不高。尤其是當(dāng)我們?yōu)橐粋€(gè)有多個(gè)樣式的元素創(chuàng)建這樣一個(gè)列表時(shí)會(huì)很麻煩痒玩。相反淳附，我們可以將聲明分組在一起：

h1 {font: 28px Verdana; color: white; background: black;}

注意，對(duì)聲明分組蠢古，一定要在各個(gè)聲明的最后使用分號(hào)奴曙，這很重要。瀏覽器會(huì)忽略樣式表中的空白符草讶。只要加了分號(hào)洽糟，就可以毫無(wú)顧忌地采用以下格式建立樣式：

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

結(jié)合選擇器和聲明的分組

我們可以在一個(gè)規(guī)則中結(jié)合選擇器分組和聲明分組，就可以使用很少的語(yǔ)句定義相對(duì)復(fù)雜的樣式堕战。

下面的規(guī)則為所有標(biāo)題指定了一種復(fù)雜的樣式：

h1, h2, h3, h4, h5, h6 {
  color: gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

上面這條規(guī)則將所有標(biāo)題的樣式定義為帶有白色背景的灰色文本坤溃，其內(nèi)邊距是 10 像素，并帶有 1 像素的實(shí)心邊框嘱丢，文本字體是 Verdana浇雹。

CSS類選擇器

類選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。
該選擇器可以單獨(dú)使用屿讽，也可以與其他元素結(jié)合使用昭灵。
提示：只有適當(dāng)?shù)貥?biāo)記文檔后吠裆，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構(gòu)想和計(jì)劃烂完。

修改 HTML 代碼

在使用類選擇器之前试疙，需要修改具體的文檔標(biāo)記，以便類選擇器正常工作抠蚣。

為了將類選擇器的樣式與元素關(guān)聯(lián)祝旷，必須將 class 指定為一個(gè)適當(dāng)?shù)闹怠Ｕ?qǐng)看下面的 HTML 代碼：

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

在上面的代碼中嘶窄，兩個(gè)元素的 class 都指定為 important：第一個(gè)標(biāo)題（ h1 元素）怀跛，第二個(gè)段落（p 元素），對(duì)應(yīng)的它的css應(yīng)該是：

.important {color:red;}

結(jié)合元素選擇器

類選擇器可以結(jié)合元素選擇器來(lái)使用柄冲。
例如吻谋，我們可能希望只有段落顯示為紅色文本：

p.important {color:red;}

選擇器現(xiàn)在會(huì)匹配 class 屬性包含 important 的所有 p 元素，但是其他任何類型的元素都不匹配现横，不論是否有此 class 屬性漓拾。選擇器 p.important 解釋為：“其 class 屬性值為 important 的所有p元素”。 因?yàn)?h1 元素不是段落戒祠，這個(gè)規(guī)則的選擇器與之不匹配骇两，因此 h1 元素不會(huì)變成紅色文本。
如果你確實(shí)希望為 h1 元素指定不同的樣式姜盈，可以使用選擇器 h1.important：

p.important {color:red;}
h1.important {color:blue;}

CSS多類選擇器

在上一節(jié)中低千，我們處理了 class 值中包含一個(gè)詞的情況。在 HTML 中馏颂，一個(gè) class 值中可能包含一個(gè)詞列表示血，各個(gè)詞之間用空格分隔。例如饱亮，如果希望將一個(gè)特定的元素同時(shí)標(biāo)記為重要（important）和警告（warning），就可以寫作：

<p class="important warning">
This paragraph is a very important warning.
</p>

這兩個(gè)詞的順序無(wú)關(guān)緊要舍沙，寫成 warning important 也可以近上。
我們假設(shè) class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體拂铡，class 中同時(shí)包含 important 和 warning 的所有元素還有一個(gè)銀色的背景 壹无。就可以寫作：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

ID選擇器

首先，ID 選擇器前面有一個(gè) # 號(hào) - 也稱為棋盤號(hào)或井號(hào)感帅。

#intro {font-weight: bold;}

ID 選擇器不引用 class 屬性的值斗锭，毫無(wú)疑問(wèn)，它要引用 id 屬性中的值失球。
以下是一個(gè)實(shí)際 ID 選擇器的例子：

<style>
    #intro { color: red; }
</style>
<p id="intro">This is a paragraph of introduction.</p>

類選擇器還是 ID 選擇器岖是？

類選擇器和ID選擇器的區(qū)別：
??區(qū)別 1：只能在文檔中使用一次
??與類不同帮毁，在一個(gè) HTML 文檔中，ID 選擇器會(huì)使用一次豺撑，而且僅一次烈疚。
??區(qū)別 2：不能使用 ID 詞列表
??不同于類選擇器，ID 選擇器不能結(jié)合使用聪轿，因?yàn)?ID 屬性不允許有以空格分隔的詞列表爷肝。
??區(qū)別 3：ID 能包含更多含義
??類似于類，可以獨(dú)立于元素來(lái)選擇 ID陆错。有些情況下灯抛，您知道文檔中會(huì)出現(xiàn)某個(gè)特定 ID 值，但是并不知道它會(huì)出現(xiàn)在哪個(gè)元素上音瓷，所以您想聲明獨(dú)立的 ID 選擇器对嚼。例如，您可能知道在一個(gè)給定的文檔中會(huì)有一個(gè) ID 值為 mostImportant 的元素外莲。您不知道這個(gè)最重要的東西是一個(gè)段落猪半、一個(gè)短語(yǔ)、一個(gè)列表項(xiàng)還是一個(gè)小節(jié)標(biāo)題偷线。您只知道每個(gè)文檔都會(huì)有這么一個(gè)最重要的內(nèi)容磨确，它可能在任何元素中，而且只能出現(xiàn)一個(gè)声邦。

區(qū)分大小寫

請(qǐng)注意乏奥，類選擇器和 ID 選擇器可能是區(qū)分大小寫的。這取決于文檔的語(yǔ)言亥曹。HTML 和 XHTML 將類和 ID 值定義為區(qū)分大小寫邓了，所以類和 ID 值的大小寫必須與文檔中的相應(yīng)值匹配。
因此媳瞪，對(duì)于以下的 CSS 和 HTML骗炉，元素不會(huì)變成粗體：

<style>
    #intro {font-weight:bold;}
</style>

<p id="Intro">This is a paragraph of introduction.</p>

由于字母 i 的大小寫不同，所以選擇器不會(huì)匹配上面的元素蛇受。

屬性選擇器

CSS 2 引入了屬性選擇器句葵。
屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。

簡(jiǎn)單屬性選擇

如果希望選擇有某個(gè)屬性的元素兢仰，而不論屬性值是什么乍丈，可以使用簡(jiǎn)單屬性選擇器。
如果您希望把包含標(biāo)題（title）的所有元素變?yōu)榧t色把将，可以寫作：

*[title] {color:red;}

與上面類似轻专，可以只對(duì)有 href 屬性的錨（a 元素）應(yīng)用樣式：

a[href] {color:red;}

還可以根據(jù)多個(gè)屬性進(jìn)行選擇，只需將屬性選擇器鏈接在一起即可察蹲。
例如请垛，為了將同時(shí)有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色催训，可以這樣寫：

a[href][title] {color:red;}

根據(jù)具體屬性值選擇

除了選擇擁有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍叼屠，只選擇有特定屬性值的元素瞳腌。
例如，假設(shè)希望將指向 Web 服務(wù)器上某個(gè)指定文檔的超鏈接變成紅色镜雨，可以這樣寫：

a[] {color: red;}

與簡(jiǎn)單屬性選擇器類似嫂侍，可以把多個(gè)屬性-值選擇器鏈接在一起來(lái)選擇一個(gè)文檔。

a[] {color: red;}

這會(huì)把以下標(biāo)記中的第一個(gè)超鏈接的文本變?yōu)榧t色荚坞，但是第二個(gè)或第三個(gè)鏈接不受影響：

<a  title="W3School">W3School</a>
<a  title="CSS">CSS</a>
<a  title="HTML">HTML</a>

屬性與屬性值必須完全匹配

請(qǐng)注意挑宠，這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表颓影，匹配就可能出問(wèn)題各淀。
請(qǐng)考慮一下的標(biāo)記片段：

<p class="important warning">This paragraph is a very important warning.</p>

如果寫成 p[class="important"]，那么這個(gè)規(guī)則不能匹配示例標(biāo)記诡挂。
要根據(jù)具體屬性值來(lái)選擇該元素碎浇，必須這樣寫：

p[class="important warning"] {color: red;}

根據(jù)部分屬性值選擇

如果需要根據(jù)屬性值中的詞列表的某個(gè)詞進(jìn)行選擇，則需要使用波浪號(hào)（~）。
假設(shè)您想選擇 class 屬性中包含 important 的元素，可以用下面這個(gè)選擇器做到這一點(diǎn)：

p[class~="important"] {color: red;}

如果忽略了波浪號(hào)父晶，則說(shuō)明需要完成完全值匹配。

部分值屬性選擇器與點(diǎn)號(hào)類名記法的區(qū)別

該選擇器等價(jià)于我們?cè)陬愡x擇器中討論過(guò)的點(diǎn)號(hào)類名記法苟穆。
也就是說(shuō)，p.important 和 p[class="important"] 應(yīng)用到 HTML 文檔時(shí)是等價(jià)的唱星。
那么雳旅，為什么還要有 "~=" 屬性選擇器呢？因?yàn)樗苡糜谌魏螌傩约淞模恢皇?class攒盈。
例如，可以有一個(gè)包含大量圖像的文檔哎榴，其中只有一部分是圖片型豁。對(duì)此，可以使用一個(gè)基于 title 文檔的部分屬性選擇器叹话，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}

這個(gè)規(guī)則會(huì)選擇 title 文本包含 "Figure" 的所有圖像偷遗。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會(huì)匹配墩瞳。

子串匹配屬性選擇器

下面介紹一個(gè)更高級(jí)的選擇器模塊驼壶，它是 CSS2 完成之后發(fā)布的，其中包含了更多的部分值屬性選擇器喉酌。按照規(guī)范的說(shuō)法热凹，應(yīng)該稱之為“子串匹配屬性選擇器”泵喘。
很多現(xiàn)代瀏覽器都支持這些選擇器，包括 IE7般妙。
下表是對(duì)這些選擇器的簡(jiǎn)單總結(jié)：

提示：任何屬性都可以使用這些選擇器纪铺。

特定屬性選擇類型

最后為您介紹特定屬性選擇器。請(qǐng)看下面的例子：

*[lang|="en"] {color: red;}

上面這個(gè)規(guī)則會(huì)選擇 lang 屬性等于 en 或以 en- 開頭的所有元素碟渺。因此鲜锚，以下示例標(biāo)記中的前三個(gè)元素將被選中，而不會(huì)選擇后兩個(gè)元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般來(lái)說(shuō)苫拍，[att|="val"] 可以用于任何屬性及其值芜繁。
假設(shè)一個(gè) HTML 文檔中有一系列圖片，其中每個(gè)圖片的文件名都形如 figure-1.jpg 和 figure-2.jpg绒极。就可以使用以下選擇器匹配所有這些圖像：

img[src|="figure"] {border: 1px solid gray;}

當(dāng)然骏令，這種屬性選擇器最常見的用途還是匹配語(yǔ)言值。

后代選擇器

后代選擇器（descendant selector）又稱為包含選擇器垄提。
后代選擇器可以選擇作為某元素后代的元素榔袋。

根據(jù)上下文選擇元素

我們可以定義后代選擇器來(lái)創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用铡俐，而在另外一些結(jié)構(gòu)中不起作用凰兑。
舉例來(lái)說(shuō)，如果您希望只對(duì) h1 元素中的 em 元素應(yīng)用樣式高蜂，可以這樣寫：

h1 em {color:red;}

上面這個(gè)規(guī)則會(huì)把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色聪黎。其他 em 文本（如段落或塊引用中的 em）則不會(huì)被這個(gè)規(guī)則選中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

語(yǔ)法解釋

在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個(gè)或多個(gè)用空格分隔的選擇器备恤。選擇器之間的空格是一種結(jié)合符（combinator）稿饰。每個(gè)空格結(jié)合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”露泊、“... 作為 ... 的后代”喉镰，但是要求必須從右向左讀選擇器。
因此惭笑，h1 em 選擇器可以解釋為 “作為 h1 元素后代的任何 em 元素”侣姆。如果要從左向右讀選擇器，可以換成以下說(shuō)法：“包含 em 的所有h1會(huì)把以下樣式應(yīng)用到該 em”沉噩。

CSS子元素選擇器

與后代選擇器相比捺宗，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

選擇子元素

如果您不希望選擇任意的后代元素川蒙，而是希望縮小范圍蚜厉，只選擇某個(gè)元素的子元素，請(qǐng)使用子元素選擇器（Child selector）畜眨。
例如昼牛，如果您希望選擇只作為 h1 元素子元素的 strong 元素术瓮，可以這樣寫：

h1 > strong {color:red;}

這個(gè)規(guī)則會(huì)把第一個(gè) h1 下面的兩個(gè) strong 元素變?yōu)榧t色，但是第二個(gè) h1 中的 strong 不受影響：

<h1>
    This is 
    <strong>very</strong> 
    <strong>very</strong>
    important.
</h1>
<h1>
    This is 
    <em>
        really 
        <strong>very</strong>
    </em>
     important.
</h1>

語(yǔ)法解釋

您應(yīng)該已經(jīng)注意到了贰健，子選擇器使用了大于號(hào)（子結(jié)合符）胞四。
子結(jié)合符兩邊可以有空白符，這是可選的伶椿。因此辜伟，以下寫法都沒有問(wèn)題：

h1 > strong
h1> strong
h1 >strong
h1>strong

如果從右向左讀，選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有 strong 元素”脊另。

結(jié)合后代選擇器和子選擇器

table.company td > p

上面的選擇器會(huì)選擇作為 td 元素子元素的所有 p 元素游昼，這個(gè) td 元素本身從 table 元素繼承，該 table元素有一個(gè)包含 company 的 class 屬性尝蠕。

CSS相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素烘豌，且二者有相同父元素。

選擇相鄰兄弟

如果需要選擇緊接在另一個(gè)元素后的元素看彼，而且二者有相同的父元素廊佩，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。
例如靖榕，如果要增加緊接在 h1 元素后出現(xiàn)的p元素的上邊距标锄，可以這樣寫：

h1 + p {margin-top:50px;}

這個(gè)選擇器讀作：“選擇緊接在 h1 元素后出現(xiàn)的段落，h1 和p 元素?fù)碛泄餐母冈亍薄?/p>

語(yǔ)法解釋

相鄰兄弟選擇器使用了加號(hào)（+）茁计，即相鄰兄弟結(jié)合符（Adjacent sibling combinator）料皇。
注釋：與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符星压。
請(qǐng)看下面這個(gè)文檔樹片段：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

在上面的片段中践剂，div 元素中包含兩個(gè)列表：一個(gè)無(wú)序列表，一個(gè)有序列表娜膘，每個(gè)列表都包含三個(gè)列表項(xiàng)逊脯。這兩個(gè)列表是相鄰兄弟，列表項(xiàng)本身也是相鄰兄弟竣贪。不過(guò)军洼，第一個(gè)列表中的列表項(xiàng)與第二個(gè)列表中的列表項(xiàng)不是相鄰兄弟，因?yàn)檫@兩組列表項(xiàng)不屬于同一父元素（最多只能算堂兄弟）演怎。
請(qǐng)記住匕争，用一個(gè)結(jié)合符只能選擇兩個(gè)相鄰兄弟中的第二個(gè)元素。請(qǐng)看下面的選擇器：

li + li {font-weight:bold;}

上面這個(gè)選擇器只會(huì)把列表中的第二個(gè)和第三個(gè)列表項(xiàng)變?yōu)榇煮w爷耀。第一個(gè)列表項(xiàng)不受影響甘桑。

CSS偽元素 (Pseudo-elements)

CSS 偽元素用于向某些選擇器設(shè)置特殊效果。

語(yǔ)法

偽元素的語(yǔ)法：

selector:pseudo-element {property:value;}

CSS 類也可以與偽元素配合使用：

selector.class:pseudo-element {property:value;}

:first-line 偽元素

"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。
在下面的例子中扇住，瀏覽器會(huì)根據(jù) "first-line" 偽元素中的樣式對(duì) p 元素的第一行文本進(jìn)行格式化：

p:first-line
  {
  color: #ff0000;
  font-variant: small-caps;
  }

注釋："first-line" 偽元素只能用于塊級(jí)元素。
注釋：下面的屬性可應(yīng)用于 "first-line" 偽元素：
??font
??color
??background
??word-spacing
??letter-spacing
??text-decoration
??vertical-align
??text-transform
??line-height
??clear

:first-letter 偽元素

"first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

注釋："first-letter" 偽元素只能用于塊級(jí)元素盗胀。
注釋：下面的屬性可應(yīng)用于 "first-letter" 偽元素：
??font
??color
??background
??margin
??padding
??border
??text-decoration
??vertical-align (僅當(dāng) float 為 none 時(shí))
??text-transform
??line-height
??float
??clear

偽元素和 CSS 類

偽元素可以與 CSS 類配合使用：

<style>
    p.article:first-letter {
        color: #FF0000;
    }
</style>

<p class="article">This is a paragraph in an article艘蹋。</p>

上面的例子會(huì)使所有 class 為 article 的段落的首字母變?yōu)榧t色。

多重偽元素

可以結(jié)合多個(gè)偽元素來(lái)使用票灰。
在下面的例子中女阀，段落的第一個(gè)字母將顯示為紅色，其字體大小為 xx-large屑迂。第一行中的其余文本將為藍(lán)色浸策，并以小型大寫字母顯示。段落中的其余文本將以默認(rèn)字體大小和顏色來(lái)顯示：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

CSS2 - :before 偽元素

":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容惹盼。
下面的例子在每個(gè) <h1> 元素前面插入一幅圖片：

h1:before
  {
  content:url(logo.gif);
  }

CSS2 - :after 偽元素

":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容庸汗。

下面的例子在每個(gè) <h1> 元素后面插入一幅圖片：

h1:after
  {
  content:url(logo.gif);
  }

CSS 偽類 (Pseudo-classes)

CSS 偽類用于向某些選擇器添加特殊的效果。

語(yǔ)法

偽類的語(yǔ)法：

selector : pseudo-class {property: value}

CSS 類也可與偽類搭配使用手报。

selector.class : pseudo-class {property: value}

錨偽類

在支持 CSS 的瀏覽器中蚯舱，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)掩蛤，已被訪問(wèn)狀態(tài)枉昏，未被訪問(wèn)狀態(tài)，和鼠標(biāo)懸停狀態(tài)揍鸟。

a:link {color: #FF0000}     /* 未訪問(wèn)的鏈接 */
a:visited {color: #00FF00}  /* 已訪問(wèn)的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}   /* 選定的鏈接 */

提示：在 CSS 定義中兄裂，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的阳藻。
提示：在 CSS 定義中晰奖，a:active 必須被置于 a:hover 之后，才是有效的腥泥。
提示：偽類名稱對(duì)大小寫不敏感畅涂。

偽類與 CSS 類

偽類可以與 CSS 類配合使用：

<style>
    a.red : visited {color: #FF0000}
</style>

<a class="red" href="css_syntax.asp">CSS Syntax</a>

假如上面的例子中的鏈接被訪問(wèn)過(guò)，那么它將顯示為紅色道川。