2010-04-14 100 views
13

所以我們要使用下面的命令對CSS錨所需的僞類CSS:一:鏈接VS只是一個(不含:鏈接部分)

a:link { color: red }  
a:visited { color: blue } 
a:hover { color: yellow } 
a:active { color: lime } 

但我的問題是,爲什麼同一個麻煩:鏈接部分?相反,它有什麼優勢,以上述(或許比清晰度等)過來:

a { color:red; } /* notice no :link part */ 
a:visited { color: blue; } 
etc.,etc. 

回答

13

:link選擇訪問過的鏈接,那就是:與href屬性還沒有被訪問過的瀏覽器錨(不管是什麼定義瀏覽器供應商已「訪問」)。

如果有:link那麼它永遠不會匹配<h1><a name="foo">A foo to be linked to</a></h1>

(雖然你應該用<h1 id="foo">A foo to be linked to</h1>這些天。)

除此之外,它更清楚它是什麼。

a   { color: orange } 
 
a:link { color: blue }  
 
a:visited { color: indigo } 
 
a:hover { color: green } 
 
a:active { color: lime }
<a>my anchor without href</a> 
 
    <br><br> 
 
    <a href="http://somelinkhere.com">my anchor without href</a>

(他們也都有不同程度的specificity

+0

你能解釋一下它匹配的部分多一點嗎?不知道我明白。 – Rob 2010-04-14 18:30:33

+2

'a'匹配所有主播。 'a:link'匹配未訪問鏈接的錨。 'a:visited'匹配被訪問鏈接的錨。 ''是一個不是任何鏈接的錨。 – Quentin 2010-04-14 20:38:23

+1

@Quentin:真的嗎?我無法在規格中找到它。 – feklee 2013-01-27 16:30:13

8

只是 「一個」 是指所有可能的鏈接(未訪問,參觀,盤旋着,和活動),而「一:鏈接「只是指正常的未訪問鏈接。

如果您使用「a」而不是「a:link」,則將所有鏈接的默認CSS設置爲「a」設置爲的任何鏈接。在這種特殊情況下,由於您指定了每個可能的僞類,因此,無論您說「a:link」還是「a」,基本無關緊要。因此,在第一組中,您寫出所有僞類(a :鏈接,一:訪問等),您指定爲每個可能的情況下,CSS範圍內「一」

a:link { color: red }  //set unvisited links to red 
a:visited { color: blue } //set visited links to blue 
a:hover { color: yellow } //set hovered links to yellow 
a:active { color: lime } //set active links to lime 

在第二組中,你只寫「一」時,實際上是在設置默認CSS對於你在第一行寫的所有鏈接,然後重新定義其他僞類的CSS

a { color: red }   //set ALL links to red! 
a:visited { color: blue } //hm, never mind, let's set visited links to blue 
a:hover { color: yellow } //hm, never mind, let's set hovered links to yellow 
a:active { color: lime } //hm, never mind, let's set active links to lime 
+0

':鏈接'不匹配*僅*未訪問的鏈接,它匹配**所有**鏈接。 – OdraEncoded 2013-11-07 12:06:21

+0

@OdraEncoded':link''不總是匹配_all_鏈接,例如。 ':visited'和'a'優先(按順序)。 ':link'只會匹配* all *鏈接(某種程度上),如果':visited'和'a'都不匹配。因此更有可能':link'只匹配未訪問的鏈接。 – WynandB 2013-11-08 05:13:35

+1

@Wynand':link' **總是匹配所有鏈接**。 ':visited'具有更高的優先級,是的,但是如果有':link'和':visited',**兩個**都匹配,':visited'選擇器效果應用在':link'後面選擇器效果。就像在其他多重選擇器匹配情況下一樣。在CSS中,沒有一個選擇器不匹配,因爲存在另一個選擇器。 http://jsfiddle.net/z9X54/1/ – OdraEncoded 2013-11-08 19:24:52

1

http://www.w3schools.com/css/css_pseudo_classes.asp

:鏈接是鏈接未訪問時。所以當有一個帶有href屬性的錨點時,用戶從來沒有在錨點後面的頁面上。

+0

這並不回答這個問題。 – Quentin 2010-04-14 22:10:59

+0

@Quentin其實,這個答案是現貨。 – WynandB 2013-09-18 04:15:58

+0

@Wynand不,它不是,':link'匹配超過未訪問的超鏈接。 – OdraEncoded 2013-11-07 12:29:08

0

選擇器:link是用於超鏈接的僞元素選擇器,任何超鏈接元素都將被匹配。 a選擇器將匹配「唯一」錨點元素。

通常,每a元素也是一個超鏈接,我不知道自己任何方式,而不使用錨創建HTML中的超鏈接,所以你可能可以使用其中任何一個在大多數情況下, 。

但是,僅使用a將匹配不是超鏈接的錨元素。例如,以這種方式編寫的錨點元素<a name=sign-up>Sign up form</a>將與超鏈接僞元素:link選擇器不匹配,但會匹配a選擇器。