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

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

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

实际上，改变链接文本颜色（包括非活动的默认蓝色）的唯一方法是对标签本身进行样式化

我的链接代码如下：

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

路由器精确链接的CSS处于活动状态：

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

因此，由于路由器链接被设置为li标签，li的背景颜色当然会正确更改，但无论如何文本颜色都保持蓝色

当路由器链接处于和不处于活动状态时（如本教程中），文本和其他设置样式的颜色不是应该从父li指定的活动类级联到标记吗

如果不是，当文本处于活动状态时，我该如何设置它的样式？我猜我会将某种活动类附加到一个非：活动的类，因为一旦鼠标点击文本，它就不会处于“活动”状态，但我似乎找不到正确的方法来这样做

如果这是一个非常基本的问题，我表示歉意，但我已经四处寻找答案，但找不到答案

---

非常感谢。

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

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

.router-link-exact-active a {} 

---

应该做到这一点，它们确实是层叠的，但是您有一个更具体的标记的默认样式，因此您的li样式不适用

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

.router-link-exact-active a {} 

该怎么做才能找到罪犯 当您看到应用了意外的样式时，如果没有用户/作者样式，可能的罪魁祸首是用户代理样式表。您可以在检查的a图元的中确认这一点。找到第一个项目的颜色属性，展开该项目以显示从最高优先级到最低优先级列出的适用样式。最高优先级样式是当前应用的样式

继承颜色 如果您希望a元素从其父元素继承其颜色。在本例中，路由器链接处于活动状态，请应用

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

继承颜色 如果您希望a元素从其父元素继承其颜色。在本例中，路由器链接处于活动状态，请应用

---

谢谢，当文本处于活动状态时，这似乎可以正确设置文本样式。但是，我仍然有一个问题，就是使用某种{…}样式是文本样式的唯一方法？这意味着当我删除CSS中对样式颜色的所有引用时，除了li{…}，或者如果我用更高的父级重复它，文本颜色不会改变。只有像上面那样使用a{…}或…-活动a{…}，我才能得到要更改的文本。我再次感到困惑，因为我认为如果没有你提到的更具体的风格，这些风格会层叠而下吗？我哪里会出错？谢谢谢谢，当文本处于活动状态时，这似乎可以正确设置文本样式。但是，我仍然有一个问题，就是使用某种{…}样式是文本样式的唯一方法？这意味着当我删除CSS中对样式颜色的所有引用时，除了li{…}，或者如果我用更高的父级重复它，文本颜色不会改变。只有像上面那样使用a{…}或…-活动a{…}，我才能得到要更改的文本。我再次感到困惑，因为我认为如果没有你提到的更具体的风格，这些风格会层叠而下吗？我哪里会出错？谢谢非常感谢！这帮我解决了这个问题。inspector元素帮助我清楚地看到了优先级LVL，而且确实存在一些排名过高的样式——尽管显然是来自“PreferenceStyleSheet”的东西。我不知道这是从哪里来的，也不知道如何修改/删除它，但正如您所说的，创建一个{color:inherit}样式确实解决了这个问题。为了明确其他人是如何从中学习的，a{…}是最具体的文本样式，在样式中具有最高的优先级，而设置a{color:inherit}仅仅意味着a的颜色与李的相同。谢谢非常感谢！这帮我解决了这个问题。inspector元素帮助我清楚地看到了优先级LVL，而且确实存在一些排名过高的样式——尽管显然是来自“PreferenceStyleSheet”的东西。我不知道这是从哪里来的，或者如何修改/删除它，但是创建了一个{ 颜色：继承}风格，正如你所说的，确实解决了它。为了明确其他人是如何从中学习的，a{…}是最具体的文本样式，在样式中具有最高的优先级，而设置a{color:inherit}仅仅意味着a的颜色与李的相同。谢谢

a {
  color: inherit;
}