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>

（他们也有不同级别的specificity）

Answer 2

“a”表示所有可能的链接（未访问，访问，悬停和活动），而“a：link”仅指正常的未访问链接。

如果使用“a”而不是“a：link”，则为所有“a”设置的链接设置默认CSS。在这种特定情况下，由于您指定了每个可能的伪类，因此无论您是说“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

Answer 3

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

：链接是未访问链接的时间。因此，当存在具有href属性的锚并且用户从未在锚点后面的页面上时。

Answer 4

Selector :link是超链接的伪元素选择器，任何超链接元素都将匹配。 a选择器将匹配“仅”锚元素。

通常，每个a元素也是一个超链接，我不知道我自己以任何方式在HTML中创建超链接而不使用锚点，所以在大多数情况下你可以使用其中任何一个。

但是，仅使用a将匹配非超链接的锚元素。例如，以这种方式编写的锚元素<a name=sign-up>Sign up form</a>将与超链接伪元素:link选择器不匹配，但会匹配a选择器。

CSS：a：链接vs只是一个（没有：链接部分）

4 个答案: