链接颜色与状态
未访问/已访问/悬停/激活四种状态颜色、下划线样式
链接颜色与状态
链接有四种状态——通过 CSS 可以分别设置颜色，提升用户体验。
学完本章你将： 掌握四种链接状态颜色、下划线控制、按钮式链接。
四种状态
html
<style>
/* 未访问 */
a:link { color: blue; }
/* 已访问 */
a:visited { color: purple; }
/* 鼠标悬停 */
a:hover { color: red; }
/* 点击瞬间 */
a:active { color: orange; }
</style>
<a href="https://example.com">示例链接</a>⚠️ 顺序很重要：
link → visited → hover → active（LVHA 口诀）。
去掉/自定义下划线
html
<style>
a { text-decoration: none; } /* 去掉下划线 */
a:hover { text-decoration: underline; } /* 悬停时出现 */
</style>按钮式链接
html
<style>
.btn-link {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.btn-link:hover {
background-color: #45a049;
}
</style>
<a href="/join" class="btn-link">立即加入</a>