css color inhertance when the link is inside the text-CodePudding

The color of text is set to white inside the container, which has text in it. But the link inside the text is not showing up as white instead blue.

I am using material ui styles.

have tried !important tag , still not working

CodePudding user response：

The default css color value of an a tag is not inherit but an internal value, so to change the color of the link you have to specify a css rule for the a tag or use a class

a {
   color: white;
}

/* or */

.link {
   color: white;
}

<div>
some text .... <a  href="">link</a>
</div>

CodePudding user response：

this problem may have occured because you linked another library that override your css If this is correct you should link your css after the link of the library

<link rel='stylesheet' href='library'>
<link rel='stylesheet' href='your_css'>

or you can do that

.container a {
  color: white !important;
}

I hope this helps you