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

Posted 2023-02-22

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

【英文标题】：Vue JS: How to style the active <a> tag in a router-link?

【发布时间】：2019-08-03 05:01:06

【问题描述】：

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

使用.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 的类，因为文本不是“活动”一次鼠标点击完成 - 但我似乎找不到正确的方法？

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

非常感谢。

【参考方案1】：

找出罪魁祸首

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

继承颜色

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

a 
  color: inherit;

demo

【讨论】：

非常感谢！这帮助我解决了它。检查器元素帮助我清楚地看到了优先级，并且确实存在一些排名过高的样式 - 尽管显然来自称为“PreferenceStyleSheet”的东西。我不知道它是从哪里来的，或者如何修改/删除它，但是按照你所说的创建一个 color: inherit 样式确实解决了它。要清楚其他人如何从中学习，a... 是 文本最具体的样式，在样式中具有最高优先级，设置 a color: inherit 仅仅意味着 a 的颜色是和李的一样。谢谢！

【参考方案2】：

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

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

.router-link-exact-active a  

应该做的伎俩

【讨论】：

谢谢，这似乎在文本处于活动状态时正确设置了文本样式。但是，我仍然有一个问题，即拥有某种 ... 样式是设置文本样式的唯一方法？这意味着当我删除 CSS 中对样式颜色的所有引用时，除了 li... （或者如果我用更高的父级重复它），文本颜色不会改变。只有像上面那样使用 a... 或 ...-active a... 才能使文本发生变化。我再次感到困惑，因为我认为如果没有更具体的样式（如您所提到的），样式会级联下来？我哪里会出错？谢谢！