CSS 链接样式

网页里到处都是链接，但默认样式千篇一律，蓝色加下划线。给链接做样式，让它在页面里更醒目、更协调，是每个页面都要做的事。

链接的四种状态

链接有四种状态，对应四种伪类，用起来要区分清楚。

/* 未访问过的链接 */
a:link {
  color: #2980b9;
  text-decoration: none;
}

/* 已访问过的链接 */
a:visited {
  color: #8e44ad;
}

/* 鼠标悬停时 */
a:hover {
  color: #e67e22;
  text-decoration: underline;
}

/* 键盘选中或点击瞬间 */
a:active {
  color: #c0392b;
}

四种状态的顺序有讲究。:hover 要写在 :link 和 :visited 后面，:active 要写在最后。顺序乱了，前面的规则会覆盖后面的，悬停效果就出不来。记法很简单，L-V-H-A。

去掉默认下划线

text-decoration: none 是导航栏的标配，去掉蓝色下划线，让链接融入整体设计。

.nav a {
  text-decoration: none;
  color: #2c3e50;
  transition: color 0.2s;
}
.nav a:hover {
  color: #3498db;
}

悬停时换个颜色，过渡动画让变化不那么生硬。

做成按钮样式的链接

链接本质是行内元素，想做得像按钮，要先转成块级或行内块级，再给背景和圆角。

<style>
  .btn-link {
    display: inline-block;
    padding: 8px 20px;
    background: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
  }
  .btn-link:hover {
    background: #2980b9;
  }
</style>
<a class="btn-link" href="#">立即购买</a>

inline-block 让链接既能设宽高间距，又能排在一行里。背景色配圆角，一个按钮就出来了。悬停变深色，点击感更强。

带图标的链接

链接前面放个小图标，常用伪元素实现，不用额外写一个 img 标签。具体写法在 CSS 伪元素 那篇有介绍。

.download::before {
  content: "↓ ";
  font-weight: bold;
}

可访问性提示

样式做得再好看，也要保证链接能识别。至少满足两点，链接文字要能说明去向，别只写”点这里”。悬停之外再给一个非颜色提示，比如下划线或图标，色弱用户才分得清状态。

小结

链接样式从四种状态入手，:link、:visited、:hover、:active 顺序别乱。去掉默认下划线、转成按钮、加图标，都是常见需求。记住 L-V-H-A 顺序和 text-decoration，链接就能做到既好看又清楚。