必须显式设置a:link、a:visited、a:hover、a:active四类伪类并按LVHA顺序声明，否则浏览器默认样式会覆盖color；:visited受隐私限制仅支持color等少数属性，且不可被JS读取或!important绕过。
a 标签的字体颜色默认受浏览器样式表控制，不是写个 color: red 就能全局生效——尤其在没重置或覆盖伪类状态时，点击后变紫、悬停没反应、访问过又不还原，全是常见现象。
为什么改了 color 却没变色？
浏览器对 a 元素内置了四套默认样式（对应四种状态），CSS 优先级会按顺序覆盖：未访问（:link）、已访问（:visited）、悬停（:hover）、激活（:active）。只写 a { color: #333; } 只影响未设状态的默认行为，其他状态仍走浏览器原生规则。
- 必须显式声明所有要用的状态，比如
a:link, a:visited, a:hover, a:active才算真正接管 -
:visited受安全限制，只能设置有限样式（color、background-color、border-color等），不能读取或影响布局 - 如果用了 CSS 预处理器或框架（如 Tailwind），可能已有全局
a样式注入，需检查 DevTools 的“Computed”面板确认最终生效来源
新手最常漏写的三个状态
只写 :hover 而忽略 :link 和 :visited，会导致：新标签页打开链接仍是蓝色，点过一次就变紫色，鼠标移上去才变红——这不是 bug，是浏览器在严格执行规范。
-
a:link：必须写，否则未访问链接沿用浏览器默认蓝 -
a:visited：必须写，否则已访问链接保持紫色（多数用户无法接受） -
a:hover：建议写，否则悬停无反馈，交互感弱 - （可选）
a:active：定义点击瞬间的颜色，提升操作确认感
用 class 控制比通配 a 更安全
直接给所有 a 加样式容易误伤：导航栏、页脚版权链接、甚至表单里隐藏的提交按钮（某些旧框架用 a 模拟按钮）都可能被连带改变。更稳妥的做法是加语义化 class。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<a href="#" class="nav-link">首页</a>，然后写.nav-link:link, .nav-link:visited, .nav-link:hover - 避免用
!important强行覆盖——它会破坏后续维护，尤其是多人协作时 - 若项目已用 Tailwind，优先用
text-blue-600 hover:text-blue-800 visited:text-purple-600这类工具类组合，比手写 CSS 更可控
移动端点击高亮色干扰怎么办？
iOS Safari 和部分安卓浏览器会给 a 元素添加半透明灰色背景（tap highlight），和自定义字体颜色冲突，显得突兀。
- 加一行
-webkit-tap-highlight-color: transparent;即可关闭 - 注意：这个属性只对支持触摸的设备生效，不影响桌面端
- 不要只加在
a上，建议统一加到*:focus或全局重置里，避免遗漏其他可点击元素
真正难的不是写对那几行 CSS，而是意识到：链接不是孤立元素，它是状态机。漏掉任一状态，用户就会在某个时刻看到“意外”的颜色——而那个时刻，往往是你刚上线、客户正在演示的时候。
