我正在用不同颜色的单词创建一个导航菜单(href链接)。我想颜色不改变任何状态(悬停,访问等)。

我知道如何为不同的状态设置颜色,但我想知道的代码只是离开文本颜色(和任何其他样式/格式),因为它是。

有什么建议吗?


当前回答

如果你设置了a.redLink{color:red;},那么要保持悬停,添加a.redLink:hover{color:red;}这将确保没有其他悬停状态会改变你的链接的颜色

其他回答

就像Chris之前说的,a应该覆盖。例如:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

在这种情况下,.nav a将始终是绿色的,:hover将不适用于它。

如果有其他规则影响它,你可以使用!important,但你不应该。这是一个坏习惯。

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

它总是绿色的,与其他规则无关。

你可以简单地为链接定义一个样式,它将覆盖a:hover, a:visited等:

a {
  color: blue;
  text-decoration: none; /* no underline */
}

如果你想使用父样式的属性,你也可以使用继承值:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

您可以在样式表中使用a选择器来定义锚点/超链接的所有状态。例如:

a {
    color: blue;
}

将覆盖所有链接样式,并使所有状态的颜色为蓝色。

如果你设置了a.redLink{color:red;},那么要保持悬停,添加a.redLink:hover{color:red;}这将确保没有其他悬停状态会改变你的链接的颜色

属性值对:

a {
    all: unset;
}

在我看来似乎更干净,并具有与所有选择器一起工作的优势,例如:

a, button /* &c... */ {
    all: unset;
}

要了解更多关于所有速记的信息,请查看此页面:https://developer.mozilla.org/en-US/docs/Web/CSS/all 正如Emi所说,不要忘记检查兼容性: https://caniuse.com/css-all