Vue JS：如何在 router-link 中设置活动 <a> 标签的样式？

Question

我正在尝试编辑我的路由器-link，以便文本的颜色以及背景在 link活跃。

对于 .router-link-exact-active class，我已将其设置为背景从某些默认值正确更改，但文本颜色始终保持不变？

确实，更改 link 文本颜色（包括非活动的默认蓝色）的唯一方法是通过样式设置标签本身。

我的 link 代码如下：

<router-link :to="{path: '/Homer'}" exact tag="li"><a>Homer</a></router-link>

标签的 CSS（在 link 激活之前设置颜色 - 它是标准颜色）：

a {
  color:royalblue;
  text-decoration: none;
}

并且路由器精确-link-活动的 CSS 是：

.router-link-exact-active {
  background: yellow;
  border-radius: 5px;
  color: red;
  font-variant: italic;
}

因此，li 的背景颜色（当然，因为 router-link 设置为 li 标签）正确更改，但文本颜色无论如何仍保持蓝色。

文本（和其他设置样式）的颜色不应该从父 li 的指定活动 class 级联 到标签（两者都在router-link 处于活动状态和不处于活动状态） - 例如本教程中的 https://youtu.be/yn0_6T4HwHs?t=266?

如果不是，我该如何在文本处于活动状态时为其设置样式 - 我猜我会将某种活动的 class 附加到 - 不是 a:active 的文本，因为文本不是 'active' 一旦鼠标完成点击它 - 但我似乎无法找到正确的方法来做到这一点？

抱歉，这是一个非常基本的问题，但我四处寻找答案却找不到。

非常感谢。

Answer 1

它们确实级联，但是您有一个更具体的 a 标签的默认样式，因此您的 li 样式没有不适用。

您需要设置比默认样式更具体的样式。

.router-link-exact-active a {}

应该可以解决问题

Answer 2

找到罪魁祸首

当您看到应用了意想不到的样式时，没有 user/author 样式，可能的罪魁祸首是用户代理样式 sheet。您可以在检查的 a 元素的 DevTools computed styles pane 中确认这一点。找到 color 属性（第一项），展开该项以显示适用的样式，从最高优先级到最低优先级列出。优先级最高的样式是当前应用的样式。

继承颜色

如果您希望 a 元素从其父元素（在本例中为 .router-link-exact-active）继承其颜色，请应用 inherit.

a {
  color: inherit;
}

demo

Vue JS：如何在 router-link 中设置活动 <a> 标签的样式？

Vue JS: How to style the active <a> tag in a router-link?

css

vue.js

vue-router

找到罪魁祸首

继承颜色