CSS链接颜色样式最佳实践

Question

有许多CSS样例可以用于样式链接的颜色。

html5boilerplate.com提供了以下用于链接的CSS代码：

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }​

这种方法对大多数情况是否足够好用？

或者还有更好的CSS代码可以为链接设置样式颜色吗？

- webvitaly

---

LoVe HAte（http://meyerweb.com/eric/css/link-specificity.html）曾经是推荐的做法。 - j08691

Answer 1

那绝对足以应付绝大多数情况。

只需记住链接样式的正确顺序：

a:link           { color: #c00 }  /* unvisited links       */
a:visited        { color: #0c0 }  /* visited links         */
a:hover, a:focus { color: #00c }  /* user hovers, or focus */
a:active         { color: #ccc }  /* active links          */

outline可能对你来说看起来不太美观，但这是一个非常重要的辅助功能。如果你去掉它，请注意提供其他的方法来正确区分当前元素（更大/更粗的字体，高对比度背景等）。

- Zoltan Toth

---

查看a和a:link选择器之间的区别：https://dev59.com/L3E85IYBdhLWcg3wvGER - Adriano

如果不支持伪类:link，我们该如何编写a:link？ - Anastasios Moraitis

@AnastasiosMoraitis，您能否请指定您的用例？当不支持伪类时，您在哪里需要它？ - Zoltan Toth

Answer 2

我经常重置可能在不同浏览器之间不同的设置。

我还喜欢通过添加一个图片（类似于维基百科中的图片）来不同地标记外部网站的链接。

a,
a:link,
a:active,
a:visited,
a:hover {
    color:           #d30;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Links to external websites */
a.external:before {
    content:         url(./pics/external.png);
}

- R_User

---

如果您删除默认的下划线，那些色盲者或使用单色显示器（如E Ink设备）的人可能无法区分链接和其他文本。 - tomasz86

@tomasz86：说得好。但是：我不知道有哪个网站会给链接加下划线。可能是因为这样会让（带有许多链接的）文本难以阅读。当我更关注无障碍性时，我了解到那些色盲的人们会对网站应用自己的样式表。这就是为什么我决定让大多数人都能够访问我的网站。那些需要下划线链接的人（可能）会自己应用样式。你有什么经验吗？ - R_User

英国政府网站（https://gov.uk）下划线标记了链接。至于使用自定义样式表，我认为只有在使用您的私人台式机/笔记本电脑时才有用。如果您需要依赖移动设备或公共计算机等，则最有可能被迫使用这些网站的默认样式。顺便说一句，在上面的代码中添加`a:focus`到`a:hover {text-decoration: underline;}`对键盘用户会有所帮助。 - tomasz86

Answer 3

如果您想确保样式适用于链接（而不是不是链接的锚点），则应该使用a:link而不是a。

另外，您可以在末尾添加a:active。这里有一个教程。

- Oriol

Answer 4

永远不要删除那个轮廓线，或者至少只在a：active时删除它。如果你将它应用到所有锚点上，那么键盘导航所使用的a:focus也会被删除。过度依赖悬停状态非常糟糕，因为触摸屏幕上没有悬停功能。

我喜欢让所有链接与其他内容区分明显。这是我的个人偏好：

2016版本

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: bolder;
    text-decoration: none;
}
a:visited { color: rgb(160,0,160); }
a:active { color: rgb(192,0,0); }
a:active, a:focus, a:hover { border-bottom-width: medium; }

2015年版本

a { border-bottom: thin solid;
    color: rgb(0,0,192);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(128,0,128); }
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom-width: medium; }

2014年版本

a { border-bottom: 1px solid;
    color: rgb(0,0,166);
    font-weight: 700;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */
a:active, a:focus, a:hover { border-bottom: 3px solid; }

2013版本

a { color: rgb(0,0,166);
    font-weight: 700;
    border-bottom: 1px dotted;
    text-decoration: none;
}
a:visited { color: rgb(122,0,122); }
a:hover, a:focus, a:active { border-bottom: 2px solid; }
a:focus, a:active { color: rgb(166,0,0); }

- tomasz86

Answer 5

我发现在编程中加入以下代码总是很好的选择：

a { outline: none; }

因为有些浏览器在点击链接时会添加令人讨厌的轮廓线。

- Camrin Parnell

---

请不要只是这样做。这个大纲的存在是为了让内容更易于理解。如果您删除它，请用其他东西替换它。请参见http://www.outlinenone.com/。 - SandRock

感谢您让我认识到这一点。我之前一直出于设计原因这么做。 - Camrin Parnell