想要修改 html 超链接的字体颜色,核心就是通过 css 样式来控制 a 标签的四种伪类状态对应的文字颜色,超链接默认会区分未访问已访问鼠标悬停点击激活这四种状态,如果只单独修改其中一种状态,其他状态还是会保留浏览器默认蓝色或者紫色,页面就会出现颜色不一致的情况,所以实际开发一般会把四种伪类统一设置,保证视觉效果统一。浏览器原生给 a 标签内置了默认样式,未访问链接默认蓝色,已经访问过的链接默认紫色,鼠标悬浮会出现下划线,点击瞬间会切换成另一种颜色,这套默认样式是浏览器内置的用户代理样式表,会优先覆盖部分简单写法,想要自定义颜色就需要写 css 把这套默认样式覆盖掉。
实现原理
a 标签是 html 里面专门用来做跳转的标签,css 伪类选择器可以精准选中超链接不同交互时刻的状态。
link 代表还没有被点击访问过的超链接
visited 代表已经点击访问完成的超链接
hover 代表鼠标移动到超链接上面悬停的状态
active 代表鼠标按下还没有松开点击激活的瞬间状态
这里有一个很重要的顺序要求,伪类必须按照 link visited hover active 这个顺序书写,也就是常说的 lvha 顺序,如果顺序写反,后面的样式就不会生效,hover 或者 active 样式会失效,这是新手最容易踩坑的地方。
三种修改方式
第一种 内部样式表方式
适合单个 html 页面使用,写在 head 标签里面的 style 标签内部
示例代码
页面里面正常写 a 标签,就会自动应用这套颜色规则。
第二种 行内样式方式
直接写在 a 标签本身的 style 属性里面,只对当前这一条超链接生效,优先级最高,适合单独某一个链接需要特殊颜色,但是这个写法有局限,行内样式没办法很好区分 hover 悬停状态,想要悬停变色就不能只靠行内 style,还是要搭配 css 伪类。
示例代码
第三种 外部 css 文件方式
适合多页面网站,把所有超链接样式单独存放在 css 文件,html 页面通过 link 标签引入,所有页面共用同一套超链接字体颜色,方便统一维护,修改一次全部页面同步更新。
进阶补充设置
除了单纯修改 color 字体颜色,开发经常会同步取消默认下划线,搭配 text-decoration none 属性,也可以继续保留下划线同时修改下划线颜色,使用 text-decoration-color 属性。如果希望页面所有超链接全部统一颜色,不需要区分访问前后,就可以直接写 a 标签选择器,不写伪类,但是鼠标悬停交互变色需求就会丢失。
优先级说明,行内 style 优先级高于内部 style,内部 style 高于外部 css,如果出现样式不生效,优先检查是不是有更高优先级样式覆盖,或者伪类顺序错误,还有浏览器缓存导致页面没有刷新到最新代码。
总结,修改 html 超链接字体颜色本质就是利用 css 针对 a 标签伪类设置 color 属性,优先推荐内部样式或者外部 css 文件写法,严格遵守 lvha 伪类顺序,遇到样式失效优先排查顺序优先级和缓存问题,就可以稳定实现自定义超链接字体颜色。
【常见问题】
问题 1 html 超链接字体颜色改完之后鼠标悬停又变回默认颜色是什么原因
回答 1 这是 html 超链接伪类顺序写错导致,没有按照 link visited hover active 顺序书写,hover 伪类样式被前面的样式覆盖,调整伪类书写顺序就可以解决 html 超链接字体颜色悬停失效问题
问题 2 html 超链接字体颜色能不能用 rgb 或者十六进制色值
回答 2 可以,html 超链接字体颜色的 color 属性支持十六进制色值 rgb rgba 还有颜色英文名称,多种写法都可以正常渲染,推荐正式项目使用十六进制色值方便统一设计规范
问题 3 为什么已经访问过的 html 超链接字体颜色修改不生效
回答 3 是因为没有写 visited 伪类选择器,浏览器默认 visited 有专属紫色样式,必须单独给 visited 设置 color,才能修改已经访问状态的 html 超链接字体颜色
问题 4 行内 style 修改 html 超链接字体颜色为什么不能实现鼠标悬浮变色
回答 4 行内 style 属性本身不支持伪类,行内样式只能设置静态颜色,hover 属于交互伪类,必须写在 style 标签或者外部 css 文件,才能实现 html 超链接字体颜色随鼠标悬停变化
【免责申明】
本文内容仅用于前端基础技术学习参考,不同浏览器版本对 css 伪类渲染存在细微差异,实际项目请自行测试验证,代码使用产生的相关风险由使用者自行承担。


