CSS: a:link vs just a (without the :link part)

问题:

So we're required to use the following order for CSS anchor pseudo-classes

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

But my question is why bother with the a:link part? Rather, is there any advantage to the above (other than perhaps clarity) over:

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

回答1:

:link selects unvisited links, that is: anchors with an href attribute which have not been visited by the browser (for whatever definition the browser vendor has for "visited").

If it has :link then it will never match <h1><a name="foo">A foo to be linked to</a></h1>

(Although you should be using <h1 id="foo">A foo to be linked to</h1> these days.)

Aside from that, it does make it clearer what it is for.

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>

(They also have different levels of specificity)

回答2:

Just "a" refers to ALL possible links (unvisited, visited, hovered, and active), whereas "a:link" just refers to normal unvisited links.

If you use "a" instead of "a:link", you are setting the default CSS for ALL links to whatever "a" is set to. In this specific case, since you specify each possible pseudoclass, it essentially doesn't matter whether you say "a:link" or just "a"

So in the first group, where you write out all the pseudoclasses (a:link, a:visited, etc), you are specifying the CSS for each possible case WITHIN "a"

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

In the second group, where you just write "a", you are actually setting the default CSS for all links to what you write in the first line, then redefining the CSS for the other pseudoclasses

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

回答3:

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

:link is when the link is unvisited. So when there is an anchor with a href attribute and the user have never been on the page behind the anchor.

回答4:

Selector :link is a pseudo-element selector for hyperlinks, any element that is an hyperlink will be matched. The a selector will match "only" anchor elements.

Normally, every a element is also a hyperlink, and I'm not aware myself of any way to create an hyperlink in HTML without using an anchor, so you can probably use either of them in most cases.

However, using only a will match anchor elements that are not hyperlinks. For example, an anchor element written this way <a name=sign-up>Sign up form</a> will not match the hyperlink pseudo-element :link selector but will match the a selector.