什么是鏈接偽類

  • 2018-08-06 21:08:39
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://51zuanshi.com.cn

CSS2.1定義了兩個(gè)只應(yīng)用于超鏈接的偽類。在網(wǎng)頁(yè)HTML和網(wǎng)頁(yè)XHTML 1.0及1.1中,超鏈接是有href屬性的所有a元素,在XML語(yǔ)言中,超鏈接則可以是任何元素,只要它作為另一個(gè)資源的鏈接。

:link

指示作為超鏈接(即有一個(gè)href屬性)并指向一個(gè)未訪問地址的所有錨。注意,有些網(wǎng)頁(yè)瀏覽器可能會(huì)不正確地將:link解釋為指向任何超鏈接,包括已訪問和未訪問的超鏈接

:visited

指示作為已訪問地址超鏈接的所有錨

第一個(gè)偽類看上去有些多余。畢竟,如果一個(gè)錨尚未訪問過(guò),那它肯定是未訪問的鏈接,不是嗎?

如果是這樣,我們所需要的應(yīng)該只是:

a {color:blue;}

a:visited {color:red;}

盡管這種格式看上去是合理的,但這確實(shí)還不夠。以上規(guī)則中,第一個(gè)規(guī)則不僅應(yīng)用于未訪問的鏈接,還會(huì)應(yīng)用到以下錨:

<a name=" sect ion4 ">4. The Lives o£ Meerkats</a>

相應(yīng)的文本就會(huì)變成藍(lán)色,因?yàn)槿缟纤?,a元素與規(guī)則a{color:blue;}匹配。因此,為了避免將鏈接樣式應(yīng)用到目標(biāo)錨,要使用:link偽類:

a:link {color: blue;}/* unvisited links are blue */

a:visited {color: red;}/* visited links are red */

你可能已經(jīng)意識(shí)到了,:link和:visited偽類選擇器在功能上與body屬性link和 vlink是等價(jià)的。假設(shè)一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師希望所有未訪問頁(yè)面的錨都是紫色,而所有已訪問頁(yè)面的錨是銀色。在HTML 3.2中,這要如下指定:

<body link="purple" vlink="silver">

在CSS中,利用以下規(guī)則可以達(dá)到同樣的效果:

a:link {color:purple;} 

a:visited {color: silver;}

當(dāng)然,對(duì)于CSS偽類,不僅可以應(yīng)用顏色,還可以應(yīng)用更多樣式。假設(shè)你希望已訪問鏈接為斜體,而且除了銀色外還有一條貫穿線

只需以下樣式就可以達(dá)到目的:

a:visited {color: silver; text-decoration: line-through; font-style: italic;}

現(xiàn)在有必要再來(lái)回顧類選擇器,并說(shuō)明類選擇器如何與偽類結(jié)合。例如,假設(shè)你希望指向除了自己建設(shè)網(wǎng)站以外的外部網(wǎng)站資源的鏈接改變顏色。如果為每一個(gè)這樣的錨指定一個(gè)類,就很容易做到:

<a href="http://www.mysite.net/">My home page</a>

<a href="http://www.site.net/" class="external">Another home page</a>

要為外部鏈接應(yīng)用不同的樣式,只需如下的一條規(guī)則:

a.external:link, a.external:visited {color: maroon;}

這個(gè)規(guī)則會(huì)使以上標(biāo)記中的第二個(gè)錨變成紫紅色,而第一個(gè)錨仍保持為超鏈接的默認(rèn)顏色(通常是藍(lán)色)。

這個(gè)一般語(yǔ)法也適用于ID選擇器:

a#£ooter-copyright:link{font-weight: bold;}

a#footer-copyright:visited {font-weight: normal;}

盡管:link和:visited非常有用,但它們是靜態(tài)的——第一次顯示之后,它們一般不會(huì)再改變文檔的樣式。CSS2.1中還有一些沒有這種靜態(tài)性的偽類,接下來(lái)將詳細(xì)說(shuō)明。


當(dāng)前文章標(biāo)題:什么是鏈接偽類

當(dāng)前URL:http://51zuanshi.com.cn/news/wzzz/what-link-pseudo-classes.html

上一篇:什么是網(wǎng)頁(yè)偽類選擇器

下一篇:什么是動(dòng)態(tài)偽類

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))