如何为<a>标签实现包含:visited状态的内联样式？

首先明确：HTML元素的style属性不支持伪类选择器（包括:link、:visited、:hover等），所以你尝试的写法从语法上就不被浏览器支持，自然无法生效。

为什么你的写法无效？ #

style属性只能定义元素常规状态的样式，不能在里面嵌套伪类选择器（比如a:link这种写法），浏览器根本无法解析这种语法。

替代方案：局部样式表实现针对性样式 #

如果不想用全局的<style>，可以给目标<a>标签加唯一标识（比如id或专属class），然后在元素附近嵌入局部<style>标签，只针对这个链接设置伪类样式，效果上接近“内联”的针对性：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1>Hello World!</h1>

  <!-- 局部样式，仅作用于下方的链接 -->
  <style>
    #custom-search-link:link {
      color: red;
    }
    #custom-search-link:visited {
      color: blue;
      text-decoration: underline; /* text-decoration需要先指定样式类型，再设置颜色 */
      text-decoration-color: purple;
    }
  </style>

  <a id="custom-search-link" href="https://www.google.com">search here</a>
</body>
</html>

额外注意：原样式的错误修正 #

你原代码里的text-decoration: purple是无效写法——text-decoration属性负责设置下划线/删除线等样式类型，颜色需要单独用text-decoration-color属性定义，上面的示例已经修正了这个问题。

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