When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag

When will an a tag not inherit color attribute of parent tag?

By default an anchor tag does not inherit attributes like color if an href attribute is present.

Check out the difference between these two on a page:

<span style=color:green><a href="t">test</a></span><span style=color:green><a>test</a></span>

Can't understand from where a tag inherits black color?

by default, css gives a black color to the text.
Since <a> is being used within the body, it inherits the features of the parent tag <body>

if you change the attributes of any element/s between <body> and <a> (for instance <li> <ul> etc.), then <a> will inherit the properties of the first direct parent.

Why doesn't my child element inherit color from its parent when parent has more specific selector?

See: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

An inherited value takes effect for an element only if no other style declaration has been applied directly to the element.

This style applies to an element with id="my_id":

#my_id {
    color: red;
}

... and will apply (inherit) to an element nested within having class="my_class" only if its color property is otherwise unspecified.

...which no longer is the case once you declare:

.my_class {
    color: blue;
}

Why input Does Not Inherit Color?

It's your user agent stylesheet which is overriding the color setting on the input.

Here are the input rules from Chrome's user agent stylesheet:

Sample Image

Note the rule:

input {
    color: -internal-light-dark(black, white);
}

This is more specific than your color rule, so overrides it.

Browsers are free to implement whatever they want in their own stylesheets, so this depends from browser to browser.

You can read more here

textarea doesn't inherit css color form parent element

Textarea will not inherit until you mark it so

.c1 textarea{
    color:inherit;
}

So you can apply color for both div child and textarea fields. If I am not mistaking input tag also does not inherit color by default

CSS inheritance -- color property

Why would you expect a property specified on a parent to override one specified on a child?

Specificity refers to a way to prioritize rules selecting the same element. The specificity of a rule on a parent (.hero) has no relevance to the specificity of a rule on its children (a).

In this case, the default color on the a element is inherit. However, you explicitly specified a different color. No amount of specificity or !important on the parent can cause it to override an explicit color specified on the child.

Overriding CSS inheritance in parent tag

Actually the <hr> tag is not inheriting anything. It is just a border with border-style: inset. It has no content only a border, hence background-color or color does not mean anything to it. You can increase the border-width and see the colors more clearly.

In the snippet I have reproduced the same <hr> tags in two different backgrounds. You can see that both are the same.

If you want to add colors and other attributes, you should use a <div> with the required attributes instead.

#page-top {  width: 100%;  height: 80px;  font-family: Open Sans, "Helvetica Neue", Helvetica, Arial;  color: #fff;  background-color: #000;  font-weight: 300;  border: 1px solid red;}
#page-bottom {  width: 100%;  height: 80px;  font-family: Open Sans, "Helvetica Neue", Helvetica, Arial;  color: #000;  background-color: #fff;  font-weight: 300;  border: 1px solid red;}
hr {  vertical-align: middle;  display: block;  background-color: #FFF!important;  color: #0F0!important;  border-width: 10px;}
#proper {  width: 100%;  height: 80px;  color: #fff;  background-color: #000;  border: 1px solid red;}
.horizontal-rule {  border: 2px solid blue;  border-style: inset;}

<div id="page-top">Black BG  <br>  <hr></div>
<div id="page-bottom">White BG  <br>  <hr></div>
<div id="proper">Using a div instead of hr  <br><br>  <div class="horizontal-rule"></div>  </div>

When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag