点击链接后全局字体颜色变化需通过javascript监听a标签click事件并修改css类或body样式实现，因css无原生响应机制；直接改style.color易被高优先级规则覆盖，应配合localstorage持久化与inherit继承确保全站同步。
点击链接后全局字体颜色变化的原理
浏览器里没有“点击链接自动改全站字体颜色”的原生机制，document.body.style.color 可以改，但必须靠 JavaScript 主动触发。CSS 本身不响应链接点击事件，:visited 或 :active 只影响链接自身样式，不会波及全文本。
关键点在于：得监听 <a></a> 元素的 click 事件，然后批量修改文本容器的样式 —— 但要注意，不能只改 ，因为内联样式、CSS 优先级高的规则（比如 span { color: red !important; }）会覆盖它。
用 JavaScript 绑定 click 并修改 body 颜色
最直接的做法是给每个链接加 onclick，或统一委托到 document。推荐后者，避免重复绑定：
示例代码：
document.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
e.preventDefault(); // 防止跳转干扰测试
document.body.style.color = '#ff6b6b';
}
});
注意：e.preventDefault() 不是必须的，但如果链接本该跳转，不加它页面就刷新了，颜色改完也看不着。真实场景中，可改成只对特定 class 的链接生效，比如：
- 给目标链接加
class="theme-toggle" - 把条件换成
e.target.classList.contains('theme-toggle') - 这样不影响其他导航链接的默认行为
为什么直接改 style.color 不总生效？ 常见失效原因有三个：
一是 CSS 优先级更高：比如某段落写了 p { color: #333 !important; }，那 document.body.style.color 就压不住它。解决办法是改更具体的 selector，或用 !important 覆盖（不推荐），更好的方式是切换 class：
document.body.className = 'dark-theme';
再在 CSS 里写：
.dark-theme { color: #4a5568; }
.dark-theme p, .dark-theme li, .dark-theme span { color: inherit; }
二是元素没继承 color：某些组件（如用 canvas 渲染的文字、SVG 中的 <text></text>）根本不响应 color 属性，得单独处理。
三是内联样式锁死：如果某个 <p style="color: blue"></p> 写死了，JavaScript 改 body 没用，得遍历并清除或覆盖这些内联 style。
兼容性与实际部署建议
IE 11 能跑上面的 JS，但 event.target 在旧版 IE 是 event.srcElement，如果还要支持，得加兼容判断。不过现在绝大多数项目已不考虑 IE。
真正容易被忽略的是：用户点了链接换色，但刷新页面后颜色就回去了。如果需要持久化，得配合 localStorage 记录状态，并在页面加载时读取：
const savedColor = localStorage.getItem('textColor');
if (savedColor) {
document.body.style.color = savedColor;
}
然后在 click 事件里加上：
localStorage.setItem('textColor', '#ff6b6b');
字体颜色这种视觉状态，一旦涉及多页、刷新、深色模式共存，光靠改 body.color 很快就会失控 —— 最终大概率得退回到 CSS class + 状态管理的路子上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
