html超链接字体颜色默认怎么改掉-html教程-PHP中文网

html超链接字体颜色默认怎么改掉

雪夜

发布： 2025-09-23 18:59:01

原创

797人浏览过

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

html超链接字体颜色默认怎么改掉

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放在 <head> 中的 <style> 标签内即可。如果只想改某个区域的链接颜色，可以加一个类名：

立即学习“前端免费学习笔记（深入）”；

图改改

在线修改图片文字

455

查看详情

<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>

登录后复制