如何通过style设置修改a href链接的样式及显示效果

完全禁用链接默认效果（保留标签结构、不可点击、无默认样式） #

直接在a标签上添加对应style属性即可：

<a href="跳转地址" style="pointer-events: none; cursor: default; text-decoration: none; color: inherit;">链接内容</a>

各属性作用：

• pointer-events: none：禁用所有点击交互，点击链接不会触发跳转
• cursor: default：鼠标悬停时显示默认箭头，不会出现链接特有的手型
• text-decoration: none：移除链接默认的下划线
• color: inherit：让链接文字颜色继承父元素的文字色，不会显示默认的蓝色

提示：如果后续需要通过JS触发该链接的点击事件，不要使用pointer-events: none，可以给href设置为javascript:void(0)配合阻止默认事件实现禁用跳转的效果。

保留跳转功能，仅自定义显示样式 #

普通文字链接自定义示例 #

<a href="跳转地址" style="text-decoration: underline dotted #27ae60; color: #27ae60; font-weight: bold;">自定义文字链接</a>

可根据需求调整对应样式属性：

• 调整下划线效果：修改text-decoration属性，支持设置下划线类型（solid实线/dotted点线/dashed虚线）、颜色、位置
• 修改文字颜色：修改color属性，支持十六进制色值、rgb值、预设颜色名
• 修改鼠标样式：修改cursor属性，可设置为pointer（手型，默认）、help（问号）等

注意：内联style不支持:hover等伪类，如果需要实现悬停变色的效果，可以补充简单的行内事件：

<a href="跳转地址" style="color: #333;" onmouseover="this.style.color='#1890ff'" onmouseout="this.style.color='#333'">悬停变色链接</a>

包裹图片的a链接去默认样式（你示例中的场景） #

部分浏览器会给包裹图片的a标签默认添加蓝色边框，按如下方式设置style即可清除所有默认效果：

<a href="https://i.sstatic.net/B8N2z.png" rel="nofollow noreferrer" style="border: none; outline: none; text-decoration: none;">
  <img src="https://i.sstatic.net/B8N2z.png" alt="link href" style="display: block;" />
</a>

• border: none：移除a标签默认的蓝色边框
• outline: none：移除点击链接时出现的默认高亮轮廓
• img标签加display: block可消除图片底部默认的3px留白

内容的提问来源于stack exchange，提问作者TEARLESS