如何正确设置指定CSS类对应链接的各状态样式

你的CSS选择器存在两处写法错误，导致样式无法按预期生效：

• .foo a:link 属于后代选择器，语义是匹配class为foo的元素内部嵌套的a标签，但你是直接把foo类加在a标签自身上，这个选择器根本匹配不到目标元素。
• CSS中逗号分隔的多选择器是完全独立的，不会自动继承前半段的选择器前缀。你写的.foo a:link, a:visited里，后半段a:visited没有类名限制，会直接匹配页面所有已访问的链接；同理a:active也会全局生效，造成样式污染。

把类选择器直接绑定到对应a标签的伪类上，逗号分隔的每一段选择器都要写全类名限制，修复后的完整可运行代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
a.foo:link, a.foo:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.foo:hover, a.foo:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<a class="foo" href="default.asp" target="_blank">This is a button link</a>
<a href="default.asp" target="_blank">This is another link</a>

</body>
</html>

• 如果你需要给某个class容器内的所有链接统一加样式，才需要用.foo a:link这类后代选择器写法，此时foo类要加在a标签的父级元素上，例如<div class="foo"><a href="#">容器内链接</a></div>。
• 编写多选择器共用的CSS规则时，务必检查逗号分隔的每一段选择器是否写全了匹配条件，避免出现意外的全局样式污染。

内容的提问来源于stack exchange，提问作者student1868