从超链接中移除所有样式/格式

Question

我正在创建一个带有不同颜色文字（href链接）的导航菜单。我希望在任何状态下（悬停，访问等）都不改变颜色。

我知道如何设置不同状态的颜色，但我想知道如何仅保留文本颜色（以及任何其他样式/格式）的代码。

有什么建议吗？

- Rbijker.com

Answer 1

您可以定义一个链接样式，它会覆盖 a:hover, a:visited 等：

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

如果你想使用父级样式的属性，也可以使用inherit值：

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

- Frxstrem

---

重要的部分是 inherit 关键字，不幸的是它并没有100%的支持。 - david

当您希望将CSS重置为默认样式时，“initial”也是有帮助的。这在这里有很好的解释链接。 - Rbijker.com

@david，这个还有效吗？inherit只在古老的浏览器和Internet Explorer中不起作用，还是在流行的浏览器（Chrome，Firefox）中也存在困难？ - parsecer

请查看 unset。unset CSS 关键字将属性重置为其继承自父级的值，如果没有继承，则将其重置为初始值。换句话说，在第一种情况下，它的行为类似于 inherit 关键字，在第二种情况下，它的行为类似于 initial 关键字。 - JackMorrissey

Answer 2

属性-值对：

a {
    all: unset;
}

在我看来，这种方式更加简洁，并且具有与所有选择器一起使用的优势，例如：

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

请注意，这也会从您的链接中删除属性{cursor: pointer;}。这可能是您要寻找的，也可能不是。在第二种情况下，只需添加此属性即可。

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

- Alan Kersaudy

---

太棒了！这个可以用于下划线和链接颜色的访问等。在我看来，这是最好的答案。 - TOPKAT

我建议为此方法检查浏览器兼容性：https://caniuse.com/css-all - Emi

但这将删除特殊的鼠标悬停图标。它将保留悬停样式。 - Garret Wilson

Answer 3

正如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 */

然后它将始终是绿色的，与任何其他规则无关。

- SpoonNZ

---

这不是他问的。请重新阅读问题。他已经知道了这个。 - david

@david 我已经重新阅读了，非常确定这就是他所问的。这段代码将允许他为 a 设置样式，从而防止任何对 :hover（或 :visited 等）的更改。你怎么不提供一个真正的解决方案，而是变成一个傻瓜并且贬低所有三个答案呢？ - SpoonNZ

谢谢你的帮助。但如果链接是这样的呢？两个单词，两种颜色，但只有一个链接：unique（粉色）sales（黑色） 并且无论在任何状态下都应该保持这种颜色。我用内联方式编码了它...{{link1：<span style="font-family: Arial;font-size: 13px;color: #e91974;font-weight: lighter;">unique</span> <span style="font-family: Arial;font-size: 13px;color: #020202;font-weight: lighter;">sales</span>}}但必须有更简洁的方法。（代码中有许多这样的链接） 有什么建议吗？ - Rbijker.com

我猜这就是为什么类被发明出来的原因。@Rbijker.com - Alan Kersaudy

Answer 4

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

a {
    color: blue;
}

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

- Chris

---

这不是他问的。请重新阅读问题。他已经知道了这个。 - david

Answer 5

如果你声明了 a.redLink{color:red;}，那么为了在鼠标悬停等情况下保持这个状态，需要添加 a.redLink:hover{color:red;}。这将确保没有其他悬停状态会改变链接的颜色。

- Danferth