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

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

新建HTML文件

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

編輯HTML代碼

使用Sublime Text或其他文本編輯器打開這個HTML文件，開始編寫代碼。

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

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

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

然后，再添加一個未被訪問過的鏈接，用于演示偽類選擇器順序的問題。

設(shè)置CSS樣式

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

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

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

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

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

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

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

你會看到已訪問過的鏈接文字呈現(xiàn)黃色，未訪問過的鏈接文字為默認(rèn)顏色，當(dāng)鼠標(biāo)懸停在鏈接上時，文字顏色變?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)先級一樣，執(zhí)行按照這樣的順序，就可以了。*/
      /*正常鏈接的顏色*/
      a:link{
        color: pink;
      }
      /*被訪問過的鏈接的顏色*/
      a:visited{
        color: yellow;
      }
      /*鼠標(biāo)指針移上鏈接的顏色*/
      a:hover{
        color: silver;
      }
      /*鼠標(biāo)點(diǎn)擊鏈接時的顏色*/
      a:active{
        color: green;
      }
    lt;/stylegt;
  lt;/headgt;
  lt;bodygt;
    lt;a href""gt;我是被訪問過的鏈接lt;/agt;
    lt;a href""gt;我是一個沒有被訪問過的鏈接lt;/agt;
  lt;/bodygt;
lt;/htmlgt;