为什么我的a标签改变了图标的颜色?

Question

我是一名学生，这对我来说有点陌生。
我正在制作一个带有图标的导航栏，并在图标周围添加了一个标签。但在那之后它改变了图标的颜色。我试了试"text-decoration: none"但是没有结果。我仍然有一个紫色的图标后行的css。什么好主意吗?谢谢你！

<div class="header">
<a href="index.php"><i id="logo1" class="material-icons" style="font-size:55px;">home</i></a>
<img id="logo" src="media/fotos/logo.png">
<ul id="navlist">
</ul>
</div>
<style>
a{
text-decoration: none;  
}
</style>

Answer 1

因为有些属性确实继承了父元素的值:

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

color是这些属性之一，所以通过为链接添加颜色，链接中的图标将从链接继承该颜色。

为了避免这种情况，将图标的颜色明确地设置为你需要的颜色(或者通过在图标样式中添加all: revert来禁用图标的继承)

Answer 2

我认为你的图标是从锚元素的:visited或:active伪类获得它的颜色。为它们添加颜色定义，这样就不会看到紫色。如:

a:visited, a:active {
color: blue;
}

您可以在这里阅读更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#css