Vue.js中如何修改router-link标签内文本的默认CSS属性？

我来帮你搞定这个问题！你之前没成功的核心原因是：Vue的router-link默认会渲染成原生<a>标签，它自带浏览器的默认链接样式（紫色、下划线这些），而你之前只给包裹它的<button>设置样式，根本没触碰到router-link本身的样式规则，所以自然没效果。

你需要重点关注的是router-link元素（或它渲染后的<a>标签）的CSS选择器，直接针对它设置样式就行，下面给你几种实用方案：

方案1：直接选中router-link设置样式 #

Vue允许直接用router-link作为CSS选择器，你可以直接编写规则覆盖默认样式：

/* 重置router-link的默认样式 */
router-link {
  text-decoration: none; /* 去掉下划线 */
  font-family: "微软雅黑", sans-serif; /* 设置字体 */
  font-size: 16px; /* 设置字号 */
  color: #333; /* 设置文字颜色 */
}

/* 可选：添加hover状态样式 */
router-link:hover {
  color: #666;
}

方案2：给router-link加类名（更精准） #

如果页面里有多个router-link，只想修改侧边栏内的，给目标router-link加类名是更稳妥的方式：
先修改页面结构：

<button>
  <router-link class="sidebar-nav-link" to="/">Home</router-link>
</button>
<button>
  <router-link class="sidebar-nav-link" to="/clothes">Clothes</router-link>
</button>
<button>
  <router-link class="sidebar-nav-link" to="/skate">Skate</router-link>
</button>

然后编写CSS规则：

.sidebar-buttons .sidebar-nav-link {
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #000;
}

.sidebar-buttons .sidebar-nav-link:hover {
  color: #555;
}

方案3：选中router-link渲染后的<a>标签 #

你也可以直接针对它渲染出的原生<a>标签设置样式，这个选择器优先级更高，能确保覆盖浏览器默认样式：

.sidebar-buttons button a {
  text-decoration: none;
  font-size: 15px;
  color: #222;
}

如果还是没生效，你可以临时用!important排查是否存在样式优先级冲突（不推荐长期使用，仅用于问题排查）：

.sidebar-buttons button a {
  text-decoration: none !important;
  color: #333 !important;
}

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