Why is the 'initial' property not working for me? - html

Question

I'm trying to create something like a native styling rule for the interactive html elements I use, therefor I'm using a type-selector, which if exchanged with the class-selector makes no visible difference at all - as far as I and the dev-tools can tell. I'm using the initial property to reset my custom to the browser's native styling. BUT whatever I try - it won't work out. My concern is that I'm doing something just slightly wrong, but I just can't tell. Please help me out! Thanks in advance!
I've posted an example of all my code I use so far below to make following along easier.
*,
*::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;
}
I'm an anchor tag

Answer 1

The initial value is applying to your a element just fine, the problem is that it doesn't do what you think it does. It resets the value to the initial value for that property (which, in this case, is black).
This is not the same as the default value for that property plus the effects of the browser's default stylesheet.
You might want the revert value, but that is currently only supported by Firefox and 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>