CSS样式未按代码生效，重启live-server后a标签边框变紫激活态变红

API 探路者

2026-10-1

问题原因

你仅对 <a> 标签的 :link（未访问链接）伪类设置了自定义样式，没有覆盖浏览器默认的 :visited（已访问链接）、:active（点击激活状态）样式，浏览器默认已访问链接为紫色、激活状态为红色，与你遇到的现象完全匹配。
你使用的Sass嵌套写法有误，将 :hover 伪类嵌套在了 :link 选择器内部，导致只有未访问的链接才能触发hover样式，已访问的链接hover效果不生效。

修复方案

将你的Sass代码替换为如下写法，统一覆盖所有链接状态的样式：

// 变量定义
$color-primary-light:#7ed56f;
$color-primary-dark:#28b485;

// 按钮样式
.learnmore-btn {
  padding: 1rem;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  transition: all ease .2s;

  // 统一覆盖未访问、已访问、激活状态的样式
  &:link,
  &:visited,
  &:active {
    color: $color-primary-light;
    border: .1rem solid $color-primary-light;
    border-bottom: .3rem solid $color-primary-light;
  }

  &:hover {
    background-color:$color-primary-light;
    color: white;
    box-shadow: 0 .5rem 1rem $color-primary-dark;
    transform: translateY(-3px);
  }
}

如果修改后仍有异常，可打开浏览器F12开发者工具，选中该按钮元素，在样式面板中勾选对应伪类（:visited/:active）查看样式生效情况，确认是否有其他全局a标签样式优先级更高导致覆盖。