有没有办法将'a'标签链接设置为默认颜色

Question

我有一个'a'标签，它是指向另一个网页的正常链接。

除非要恢复默认的正常链接外观，否则除非鼠标光标悬停在链接上，否则我想禁用默认的链接外观。

这是我到目前为止尝试过的：

（HTML）

   <a href="example.com">example</a>

（CSS）

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: unset;
    text-decoration: underline;
}

JS fiddle example of that code here

问题在于，在鼠标悬停期间，链接颜色保持黑色，并且不会取消设置或恢复为原始链接蓝色。是否有用于“原始设置”或类似名称的特殊CSS关键字？

Answer 1

value for original setting you're looking for被称为initial。

a:hover {
    color: initial
}

但是，这可能会使链接变黑。这意味着在这种情况下它对您不起作用。 不过，您可以通过a样式来解决此问题。通过:hover选择器使用:not的倒数。

a:not(:hover){
  color: #000;
  text-decoration: none;
}

<a href="#">Hi, I'm Link.</a>

它的工作方式是将样式应用于链接，只要它不是悬停效果即可。单独使用a也会设置:hover的样式，这是我们不希望的。

或者如果在您的环境中不起作用，则可以使用default colors设置链接的样式：

a { color: #000; text-decoration: none; }

a:hover {color: #0000EE; text-decoration: underline; }

<a href="#">Hi, I'm Link.</a>

这应该在所有地方都有效，因为它是常规的颜色更改。但是，请注意，默认颜色可能会因浏览器的不同而略有不同。我想，这样做的好处是，所有浏览器的颜色都保持不变。

中间和最后一段代码的区别在于，中间代码使用默认的浏览器设置，而最后一个则使用您自己的蓝色。