CSS 链接

链接 (<a> 标签) 是网页交互的核心元素。默认情况下，链接在不同状态下有不同的外观。使用 CSS，我们可以完全自定义链接的样式，使其更好地融入网站的设计中。

链接的状态

链接有四种基本状态，我们可以使用伪类 (Pseudo-classes) 来为每种状态分别设置样式：

:link: 正常状态，即一个还未被访问过的链接。
:visited: 已被用户访问过的链接。
:hover: 鼠标指针正悬停在上面的链接。
:active: 用户正在点击的链接（从鼠标按下到释放之间的状态）。

css

/* 未访问的链接 */
a:link {
  color: #1a0dab;
  text-decoration: underline;
}

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

/* 鼠标悬停的链接 */
a:hover {
  color: #ff0000;
  text-decoration: none;
}

/* 正在被点击的链接 */
a:active {
  color: #0000ff;
}

LVHA 顺序

当为链接设置样式时，请务必遵循 L-V-H-A 的顺序：:link -> :visited -> :hover -> :active。

这是因为 CSS 的层叠规则。如果顺序不对，某些样式可能会被覆盖。例如，如果把 :hover 放在 :visited 前面，那么当鼠标悬停在一个已访问的链接上时，:visited 的规则会覆盖 :hover 的规则，导致悬停效果失效。

`text-decoration`

text-decoration 属性常用于控制链接的下划线。

css

/* 移除所有链接的下划线 */
a {
  text-decoration: none;
}

/* 只在鼠标悬停时显示下划线 */
a:hover {
  text-decoration: underline;
}

这是一个非常常见的设计模式，可以在保持界面简洁的同时，清晰地向用户表明这是一个可点击的链接。

`background-color`

我们也可以改变链接的背景颜色，来创造出类似按钮的效果。

css

a.button {
  display: inline-block; /* 让 a 标签表现得像块级元素，可以设置宽高和内外边距 */
  padding: 10px 20px;
  background-color: #4CAF50; /* 绿色 */
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease; /* 添加平滑的过渡效果 */
}

a.button:hover {
  background-color: #45a049;
}

`cursor`

cursor 属性可以改变鼠标悬停在元素上时的指针样式。链接默认是 pointer (小手形状)。你可以根据需要进行修改，例如，对于一个被禁用的链接，可以设置为 not-allowed。

css

a.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none; /* 禁用所有鼠标事件 */
}

通过为链接的不同状态设置合适的样式，你可以为用户提供清晰的视觉反馈，极大地提升网站的可用性和用户体验。

CSS 链接 ​

链接的状态 ​

LVHA 顺序 ​

text-decoration ​