How does CSS inherit behave? [duplicate] - css

Question

This question already has answers here:
What is use of 'initial' value in CSS?
(3 answers)
What's default HTML/CSS link color?
(12 answers)
Closed 2 years ago.
I have seen an example in MDN lesson about inheritance, and I can't understand why the third link's color is black? it should be blue, like a usual link, because the initial value supposes to be the default value!
Thank you for helping me.
Here is the code:
body {
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}
<ul>
<li>Default link color</li>
<li class="my-class-1">Inherit the link color</li>
<li class="my-class-2">Reset the link color</li>
<li class="my-class-3">Unset the link color</li>
</ul>

Answer 1

it is because the initial color of attrubutes are black, same with
here is an example from w3schools where they set the color of the division to red, but using initial resets h1 to the base color of attributes.
div {
color: red;
}
#initialH1Color {
color: initial;
}
<div>
<h1 id="initialH1Color">this will be initial color</h1>
<h1>this will be div color: red</h1>
</div>
here is an example of inherit
div{
background: #333;
border: 5px solid orange;
color: lime;
}
.initial {
color: initial;
}
.inherit {
color: inherit;
}
<div>
<h1 class="initial">class initial</h1>
<h1 class="inherit">class inherit</h1>
<h1>no class</h1>
</div>
as you can see here class inherit and no class are the same color, that is because inherit is the automatic/normal/basic/initial value for color
The inherit keyword specifies that a property should inherit its value
from its parent element.
UPDATE
the reason for the a attribute beeing blue by default (which it is not, it is black). is because it is a link. take a look at the example
<a>no href tag = black</a>
has href tag = blue
<a href="#" >same with this one</a>