CSS:a:链接vs只是一个(没有:链接部分)

Question

所以我们需要对CSS anchor伪类使用以下顺序

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

但我的问题是为什么要打扰a:link部分？相反,上述(除了清晰度之外)是否有任何优势:

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

Answer 1

: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>

(他们也有不同程度的特异性)

Answer 2

只是"a"指的是所有可能的链接(未访问,访问,悬停和活动),而"a:link"仅指正常的未访问链接.

如果使用"a"而不是"a:link",则将所有链接的默认CSS设置为"a"设置为的任何值.在这种特定情况下,由于您指定了每个可能的伪类,因此无论您是说"a:link"还是"a"都无关紧要

所以在第一组中,你写出了所有的伪类(a:link,a:visited等),你为每个可能的情况指定了CSS在"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

在第二组中,您只需编写"a",实际上是为第一行中写入的所有链接设置默认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