css - VueJS : How to style the active tag in a router-link?

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