Vue JS：如何在路由器链接中设置活动 <a> 标记的样式？

Question

我正在尝试编辑我的路由器链接，以便当链接处于活动状态时，文本的颜色以及背景会发生变化。

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

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

我的链接代码如下：

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

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

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

并且 router-exact-link-active 的 CSS 是：

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

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

文本的颜色（和其他设置的样式）是否应该从父 li 分配的活动类向下级联到标记（无论是路由器链接是还是不是主动） - 例如在本教程中 https://youtu.be/yn0_6T4HwHs?t=266?

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

抱歉，如果这是一个非常基本的问题，但我环顾四周找不到答案。

非常感谢。

Answer 1

找出罪魁祸首

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

继承颜色

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

a {
  color: inherit;
}

demo

Answer 2

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

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

.router-link-exact-active a {} 

应该做的伎俩