Why does my a tag change the color of my icon?-CodePudding

I'm a student and it's kinda new to me.
I was making a navbar with a icon and put an a tag around the icon. But after that it changed the color of the icon. I tried the "text-decoration: none" but no result. I still have a purple icon after the line of css. Any ideas? Thank you!

<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>

CodePudding user response：

Because some properties do inherit values form its parent element(s):

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

color is one of those properties, so by adding a color to your link, the icon inside the link will inherit that color from the link.

To avoid that, set the color of your icon explicitly to the color you need it to be (or disable inheritance for you icon at all by adding all: revert to you icon styles)

CodePudding user response：

I think your icon is getting it's color from the anchor element's :visited or :active pseudo-class. Add color definition to them so you would not see purple color. Such as:

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

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#css