CSS：a:link 与仅 a（不带 :link 部分）

发布于 2024-08-29 05:29:16 字数 334 浏览 7 评论 0原文

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

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.

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹎☆浅夏丿初晴 2024-09-05 05:29:16

:link 选择未访问的链接，即：具有浏览器未访问过的 href 属性的锚点（无论浏览器供应商对“已访问”的定义是什么）。

如果它有 :link 那么它永远不会匹配

要链接到的 foo

< /code>

（尽管现在您应该使用

A foo 链接到

。）

除此之外，它确实使人们更清楚什么它是为了。

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>

（它们还具有不同级别的特异性）

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

回复收藏 0 原文

眼趣 2024-09-05 05:29:16

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

如果您使用“a”而不是“a:link”，则将所有链接的默认 CSS 设置为“a”的设置。在这种特定情况下，由于您指定了每个可能的伪类，因此您是否说“a：link”或只是“a”本质上并不重要。

因此，在第一组中，您写出所有伪类（a：link，a :visited 等），您正在为“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

在第二组中，您只需编写“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

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

回复收藏 0 原文