如何仅为单个HTML链接设置背景样式且不影响站点内其他链接

结论 #

行内style属性本身不支持定义:link/:visited/:hover/:active这类伪类状态的样式规则，因此你想要的「不同交互状态下单独调整个别链接背景」的需求，无法完全通过直接写行内style属性实现，下面给出两种可行的实现方案：

方案一（推荐）：给特殊链接添加自定义类名 #

该方案改动最小，也不会影响站点内其他链接的全局样式：

1. 给需要单独调整样式的链接添加自定义类名，示例如下：

<a class="custom-link" href="你的链接地址">链接文本</a>

2. 在你现有全局a标签样式的后面，补充仅作用于该类名的样式规则，示例如下（你可以按需修改各个状态的背景色值）：

.custom-link:link {
  color: white;
  background-color: #ff0000; /* 替换为你需要的默认背景色 */
  text-decoration: none;
}
.custom-link:visited {
  color: grey;
  background-color: #cccccc; /* 替换为你需要的访问后背景色 */
  text-decoration: none;
}
.custom-link:hover {
  color: lightgrey;
  background-color: #eeeeee; /* 替换为你需要的悬停时背景色 */
  text-decoration: underline;
}
.custom-link:active {
  color: black;
  background-color: #000000; /* 替换为你需要的点击时背景色 */
  text-decoration: underline;
}

方案二：用行内事件监听实现（仅适合临时特殊场景，不推荐） #

如果确实需要把所有逻辑都写在a标签上，可以通过原生JS事件监听动态修改行内样式，示例如下：

<a 
  href="你的链接地址" 
  style="color:white;background-color:transparent;text-decoration:none;"
  onmouseover="this.style.backgroundColor='#eeeeee';this.style.color='lightgrey';this.style.textDecoration='underline'"
  onmouseout="this.style.backgroundColor='transparent';this.style.color='white';this.style.textDecoration='none'"
  onmousedown="this.style.backgroundColor='#000000';this.style.color='black'"
  onmouseup="this.style.backgroundColor='#eeeeee';this.style.color='lightgrey'"
>链接文本</a>

该方案的缺点是维护成本高，伪类状态覆盖不全（比如无法实现:visited状态的样式调整）。

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