紫色表示已访问的超链接，除非按钮

Question

如果超链接以前被访问过，则设计为紫色。但是按钮也是超链接，它们的颜色不应该改变。

以下 css 代码无法正常工作：

a:visited:not(.button),
a:visited:not(.tcm-btn) {
// a:visited {
  color: purple;
}

//a.button:visited {
//   color: #fff;
//}

//a.tcm-btn:visited {
//   color: #fff;
//}

如果注释（由 // 表示）被删除，并且将注释应用于前两行，则一切正常。

但是，行之有效的方法并不理想。虽然按钮今天可能是白色的，但明天可能就不是了。

是否可以通过某种方式更改语法来实现理想的设计？

编辑 - 添加 HTML

应要求，HTML如下：

      <a href="/index.html" style="display: inline" class="button">⌂ Home</a>
      <a href="/about.html" style="display: inline" class="button">❓ About</a>
      <a href="/answers.html" style="display: inline" class="button">✅ Answers</a>
      <a href="/programs.html" style="display: inline" class="button"> Programs</a>

      <!-- The Cookie Machine - Hidden Button -->
      <a href="#0" class="tcm-btn">tCM</a>

Answer 1

因为 :visited 默认紫色，所以您的 :not 选择器并没有真正覆盖任何东西。在这种情况下，您可以通过

覆盖按钮 links

a.button:visited { 
  color: inherit; 
}

下面是一个工作示例。尝试使用命令 (CTRL) 单击 link 以查看它如何呈现已访问的 hyperlinks.

a:visited {
  color: red;
}

a.button:visited {
  color: inherit;
}

<a href="https://google.com">Default `A` tag</a>
<a class="button" href="https://google.com">`A` tag with `button` class</a>

已更新：原因和方式

默认情况下，:visited links 使用紫色下划线样式呈现。
可选 :visited link 可以根据一些有限的属性设置样式（参见 MDN page for ':visited'）
设置 color: inherit; 将覆盖它给定的任何颜色值，以及 force-inherit 其父项的样式。（参见 MDN page for 'inherit'）
- 在这种情况下，a.button:visited 将覆盖其默认 purple 颜色并继承其父项的颜色（即 body 的 color）。

紫色表示已访问的超链接，除非按钮

Purple for visited hyperlinks unless buttons

css

anchor

编辑 - 添加 HTML

已更新：原因和方式