Why has the link color changed like that? [duplicate]

I saw the below code on the Mozilla site on the section explaining the inheritance in CSS

I understand why the first two link colors are blue and green, however why does the third one change color to black and the fourth one to green? I think I don't really understand the purpose of initial and unset attributes nor the difference between them and the explanation on the Mozilla site is enigmatic to me. Can someone please explain this to me?

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>