CSS中link的background-color属性受代码块顺序影响的问题

嘿，这个问题我太熟啦！本质上是CSS层叠优先级和伪类声明顺序搞的鬼～

问题原因 #

CSS的核心规则之一：当多个选择器的特异性（specificity）完全相同时，后声明的规则会覆盖先声明的。你写的.btn:link、.btn:visited和.btn:hover、.btn:active，它们的特异性是完全一致的（都是类选择器+伪类选择器的组合）。

如果把hover/active的规则块放在link/visited前面，那当鼠标悬停时，后面的link/visited样式就会直接覆盖掉hover的背景色，自然就看不到悬停效果了。

正确的伪类顺序（必记口诀：LVHA） #

针对链接类元素的伪类，必须严格遵循以下顺序才能保证所有交互状态正常生效：

• :link：未访问过的链接
• :visited：已访问过的链接
• :hover：鼠标悬停时
• :active：鼠标点击（按住）时

代码示例对比 #

错误写法（hover不生效）

/* ❌ 错误顺序：hover在link前面，样式被覆盖 */
.btn:hover, .btn:active {
  background-color: #ff6347; /* 悬停/点击的红色 */
}

.btn:link, .btn:visited {
  background-color: #4CAF50; /* 初始绿色 */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: white;
}

正确写法（所有状态正常）

/* ✅ 正确顺序：LVHA */
.btn:link, .btn:visited {
  background-color: #4CAF50; /* 初始绿色 */
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
  color: white;
}

.btn:hover {
  background-color: #ff6347; /* 悬停红色 */
}

.btn:active {
  background-color: #e53935; /* 点击时更深的红色（可选，也可以和hover共用规则） */
}

补充说明 #

把:active放在:hover后面的原因是：当你点击按钮时，鼠标其实是处于悬停状态的，所以:active的样式需要覆盖:hover的，才能让点击时的状态区分度更明显。

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