默认链接颜色由浏览器设定,可通过CSS的a:link、a:visited、a:hover、a:active伪类自定义未访问、已访问、悬停和点击状态的颜色,并建议配合下划线等视觉提示以提升可访问性。

HTML超链接的默认字体颜色是由浏览器设定的,通常未访问的链接是蓝色,已访问的是紫色,点击时是红色。要修改这些默认颜色,你可以使用CSS来覆盖默认样式。
使用CSS修改链接颜色
通过 a:link、a:visited、a:hover 和 a:active 这四个伪类,可以分别设置链接在不同状态下的颜色:
- a:link:未访问的链接
- a:visited:已访问的链接
- a:hover:鼠标悬停时
- a:active:正在点击时
示例代码:
<style>
a:link {
color: #007bff; /* 自定义未访问颜色 */
text-decoration: none;
}
a:visited {
color: #6c757d; /* 自定义已访问颜色 */
}
a:hover {
color: #0056b3; /* 鼠标悬停颜色 */
text-decoration: underline;
}
a:active {
color: #dc3545; /* 点击瞬间颜色 */
}
</style>
应用到整个页面或特定元素
如果你想让全站链接统一风格,把上面的CSS放在 中的 标签内即可。如果只想改某个区域的链接颜色,可以加一个类名:
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记(深入)”;
<style>
.custom-link:link {
color: green;
}
.custom-link:visited {
color: gray;
}
.custom-link:hover {
color: red;
}
.custom-link:active {
color: orange;
}
</style>
<p><a href="#" class="custom-link">这是一个自定义颜色的链接</a></p>注意事项
确保设置的颜色有足够的对比度,便于可读性和无障碍访问。不要只靠颜色区分链接状态,可配合下划线、字体粗细等视觉提示。
基本上就这些,不复杂但容易忽略细节。

















