CSS initial, inherit,unset keywords

Look at the following example, which is extracted from MDN https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance. This is my favourite example to show how initial, inherit and unset works.

body {
       color: green;
}
.my-class-1 a {
      color: inherit;
}
.my-class-2 a {
      color: initial;
}
.my-class-3 a {
      color: unset;
}

<ul>
<li>Default <a href="#">link</a> color</li>
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
<li class="my-class-2">Reset the <a href="#">link</a> color</li>
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>

What’s your guess of colors of these links?

Three.

Two.

One.

So the first one reflects the default color of user agent— browser style.

The second inherits from its parent, body.

The third shows the default style which has nothing to do with user agents. It is defined in specs.

Because color is an inherited property, so unset is equivalent to inherit, hence the color is green.