如何用CSS自定义文本链接的:focus-visible蓝色聚焦环样式？

问题原因 #

浏览器为保护用户隐私，对:visited伪类的样式修改施加了严格限制——仅允许修改颜色相关属性（如color、background-color），而box-shadow、outline重置这类非颜色属性，在:visited与:focus-visible组合使用时会被浏览器忽略。这就导致你写的a:visited:focus-visible规则中，outline:0和紫色box-shadow无法生效，最终保留了a:focus-visible中的蓝色阴影，同时可能叠加了浏览器默认的聚焦轮廓。

解决方案 #

使用CSS变量统一控制链接颜色，避开:visited的样式限制，同时简化代码逻辑：

html {
  box-sizing: border-box;
  font-size: 16px;
}

a {
  /* 定义链接颜色变量 */
  --link-color: #0000ff;
  color: var(--link-color);
  text-decoration: underline;
  border-radius: 2px;
}

/* 已访问链接仅修改变量值 */
a:visited {
  --link-color: purple;
}

p {
  color: #3b3b3b;
  font-family: system-ui;
  line-height: 1.5;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 聚焦样式统一使用变量，无需区分已访问状态 */
a:focus-visible {
  text-decoration: none;
  background-color: var(--link-color);
  color: white;
  outline: 0;
  box-shadow: 0 0 0 2px var(--link-color);
  border-radius: 2px;
}

原理说明 #

CSS变量允许在:visited伪类中修改，且变量值会传递给后续的:focus-visible规则。这样既符合浏览器的隐私限制，又能让已访问链接聚焦时自动应用对应的紫色样式，同时确保outline:0生效，彻底去除默认的蓝色聚焦边框。

内容的提问来源于stack exchange，提问作者A.J. Kandy