CSS偽類選擇器在設(shè)置樣式時(shí)需要按照一定的順序來(lái)寫，才能正確地顯示效果。例如，鏈接的不同狀態(tài)（未點(diǎn)擊、已訪問(wèn)過(guò)）以及鼠標(biāo)懸停在鏈接上時(shí)的效果可能存在沖突，所以我們需要遵循一定的規(guī)則來(lái)編寫樣式代碼。

CSS偽類選擇器在設(shè)置樣式時(shí)需要按照一定的順序來(lái)寫，才能正確地顯示效果。例如，鏈接的不同狀態(tài)（未點(diǎn)擊、已訪問(wèn)過(guò)）以及鼠標(biāo)懸停在鏈接上時(shí)的效果可能存在沖突，所以我們需要遵循一定的規(guī)則來(lái)編寫樣式代碼。

新建HTML文件

首先，我們需要新建一個(gè)HTML文件，并將其命名為“CSS偽類選擇器的順序介紹（16）.html”。確保該文件可以被瀏覽器打開(kāi)。

編輯HTML代碼

使用Sublime Text或其他文本編輯器打開(kāi)這個(gè)HTML文件，開(kāi)始編寫代碼。

首先，我們添加lt;!DOCTYPE htmlgt;標(biāo)簽來(lái)聲明這是一個(gè)HTML5文檔，接著添加lt;htmlgt;標(biāo)簽來(lái)包含網(wǎng)頁(yè)的主體部分。

然后，添加lt;headgt;標(biāo)簽來(lái)包含HTML文檔的頭部信息，其中包括lt;titlegt;標(biāo)簽用于設(shè)置網(wǎng)頁(yè)的標(biāo)題，以及l(fā)t;metagt;標(biāo)簽來(lái)設(shè)置頁(yè)面的文字編碼方式為UTF-8，以確保瀏覽器正確顯示頁(yè)面內(nèi)容。

接下來(lái)，在lt;bodygt;標(biāo)簽中添加lt;agt;標(biāo)簽來(lái)創(chuàng)建一個(gè)已被訪問(wèn)過(guò)的鏈接，可以使用百度首頁(yè)作為示例。

然后，再添加一個(gè)未被訪問(wèn)過(guò)的鏈接，用于演示偽類選擇器順序的問(wèn)題。

設(shè)置CSS樣式

在lt;stylegt;標(biāo)簽中，我們?yōu)殒溄釉O(shè)置樣式，并聲明其為CSS類型。

首先，我們將設(shè)置正常鏈接的顏色為粉色（需要將正常鏈接樣式放在第一個(gè)位置）。

接著，我們?yōu)?visited偽類設(shè)置樣式，將已訪問(wèn)過(guò)的鏈接文字顏色設(shè)置為黃色（已訪問(wèn)鏈接樣式放在第二個(gè)位置）。

然后，我們?yōu)?hover偽類設(shè)置樣式，將鼠標(biāo)懸停在鏈接上時(shí)的文字顏色設(shè)置為銀色（鼠標(biāo)指針劃過(guò)鏈接樣式放在第三個(gè)位置）。

最后，我們?yōu)?active偽類設(shè)置樣式，將鼠標(biāo)點(diǎn)擊鏈接時(shí)的文字顏色設(shè)置為綠色（鼠標(biāo)指針點(diǎn)擊鏈接樣式放在第四個(gè)位置）。

在瀏覽器中預(yù)覽效果

保存并右擊HTML文件，在彈出的菜單中選擇“在瀏覽器中打開(kāi)”選項(xiàng)，以預(yù)覽效果。

你會(huì)看到已訪問(wèn)過(guò)的鏈接文字呈現(xiàn)黃色，未訪問(wèn)過(guò)的鏈接文字為默認(rèn)顏色，當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，文字顏色變?yōu)殂y色，而在鼠標(biāo)點(diǎn)擊鏈接后，文字顏色變?yōu)榫G色。

源代碼參考

以下是本案例的源代碼，供大家參考：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
  lt;headgt;
    lt;titlegt;CSS偽類選擇器的順序介紹（16）lt;/titlegt;
    lt;meta charset"utf-8"gt;
    lt;style type"text/css"gt;
      /*這些偽類的優(yōu)先級(jí)一樣，執(zhí)行按照這樣的順序，就可以了。*/
      /*正常鏈接的顏色*/
      a:link{
        color: pink;
      }
      /*被訪問(wèn)過(guò)的鏈接的顏色*/
      a:visited{
        color: yellow;
      }
      /*鼠標(biāo)指針移上鏈接的顏色*/
      a:hover{
        color: silver;
      }
      /*鼠標(biāo)點(diǎn)擊鏈接時(shí)的顏色*/
      a:active{
        color: green;
      }
    lt;/stylegt;
  lt;/headgt;
  lt;bodygt;
    lt;a href""gt;我是被訪問(wèn)過(guò)的鏈接lt;/agt;
    lt;a href""gt;我是一個(gè)沒(méi)有被訪問(wèn)過(guò)的鏈接lt;/agt;
  lt;/bodygt;
lt;/htmlgt;