Почему цвет ссылки черный, если мы установили ее на `initial`, а синий в противном случае?

Question

Я проходил учебник mdn css, пока не достигнул значения initial для свойства цвета для тега a.

1 - если мы не укажем цвет для элемента, это будет синий .

2, но если мы установим цвет на initial, он будет быть чёрным .

для меня оба (без указания какого-либо значения и установки его в качестве начального) выглядят как одно и то же (значение в таблице стилей браузера по умолчанию для a цвета) может понравиться объясните, что здесь происходит?

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>

Answer 1

Получается, что каждое свойство css имеет начальное значение

, например:

background-color начальное значение Initial: transparent.

background-image начальное значение Initial: none.

в случае свойства color оно определяется как Initial: depends on user agent

, что означает, что поставщик браузера должен определить это значение (это черный для Google chrome).

, поэтому color:initial будет применять черный цвет для ссылки.

, но если мы не указали для любого свойства цвета для a по умолчанию будет использоваться браузер значение таблицы стилей по умолчанию для a цвет, который синий , точнее -webkit-link.