<ul>
    <li>Default <a href="#">link</a> color</li>
    <li >Inherit the <a href="#">link</a> color</li>
    <li >Reset the <a href="#">link</a> color</li>
    <li >Unset the <a href="#">link</a> color</li>
</ul>

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

I'm getting help at MDN site. (https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

What I can't understand is my-class-2 a rulesets in css. the property value of color attribute is set to initial. Initial value sets the property value applied to a selected element to the initial value of that property. When I see it, the a tag text color belonged to .my-class-2 class displayed black. Isn't default property value of color attribute in a tag is blue? I don't know what's happening.

I want to know default property value of color attribute in a tag isn't blue.

CodePudding user response：

• "The initial value of each property is indicated in the property's definition" [specification].
• The initial value of the color property is defined as CanvasText [specification].
• The exact value of CanvasText may be defined "by the user, the browser, or the OS" [specification].

Usually, CanvasText is defined as black or a similarly dark color. If a user sets their browser and/or OS to dark mode, CanvasText may, however, be defined as white or a similarly light color.

CodePudding user response：

The initial value of the color property is browser-dependent (so that's mostly black). Initial means browser default, that’s how this property has been defined.

CodePudding user response：

Since the parent element of a is green, unset will set the color to green

unset will favor legacy values ​​over browser values

initial will set all to default color (black)