Почему «начальное» свойство не работает для меня?

Question

Я пытаюсь создать что-то похожее на собственное правило стиля для интерактивных html элементов, которые я использую, для этого я использую type -selector, который при обмене с классом -селектор вообще не имеет никакой видимой разницы - насколько я и dev-tools можем сказать. Я использую initial свойство, чтобы сбросить мой пользовательский стиль на родной для браузера. НО что бы я ни старался - не получится. Меня беспокоит то, что я делаю что-то просто немного неправильно, но я просто не могу сказать. Пожалуйста, помогите мне! Заранее спасибо!

Ниже приведен пример всего моего кода, который я использую ниже, чтобы упростить последующие действия.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
}

ul a, ol a {
  text-decoration: none !important;
}

a {
  color: #2196f3;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a[type="nativeStyling"] {
  color: initial;
  background-color: initial;
  text-decoration: initial;
}
a[type="nativeStyling"]:hover {
  text-decoration: initial;
}

<a href="#" type="nativeStyling">I'm an anchor tag</a>

Answer 1

Значение initial применяется к вашему элементу просто отлично, проблема в том, что он не делает то, что вы думаете, он делает. Он сбрасывает значение до начального значения для этого свойства (которое в данном случае равно black).

Это , а не , то же самое, что значение по умолчанию для этого свойства плюс эффектов таблицы стилей по умолчанию браузера .

Возможно, вы захотите значение revert , но в настоящее время поддерживается только , поддерживаемое Firefox и Safari .

a { display: block; color: pink }

.i { color: initial; }

.r { color: revert; }

<a class="i" href="http://example.com/">One</a>
<a class="r" href="http://example.com/">Two</a>
<a class="x" href="http://example.com/">Three</a>