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

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

\n\n

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

\n\n

.router-link-exact-active a {} \n

\n\n

应该能解决问题

\n

Answer 2

寻找罪魁祸首

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

继承颜色

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

a {
  color: inherit;
}

演示