The reason why the color of a element cannot inherit the parent element

First think about a question:
insert image description here

Why didn't you set the font color of a element and p element, they both have colors, and the colors are not the same.

This involves a knowledge point, inheritance , the parent element fills in the css style related to the text content, which can be inherited by the child elements, but it is not absolute. The a element above is an example. So what caused this situation to happen? This involves the process of page rendering:

As for the browser, he is reading the code line by line, which is also a tree structure
insert image description here

The prerequisite for rendering each element is that all the css attributes of the element must have a value. If there is no value, how does the browser know what the element looks like, and how does it display it on the page? ( Let me tell you that there is a man who has a mouth and a pair of eyes, so please draw his whole body, you must not be able to draw it.) The process of an element from having no attribute value to having all values is called the calculation of attribute value process

The calculation process of attribute value (4 steps):

1. Determine the declared value :
insert image description here

First understand one thing, the style sheet, the browser, he has a style sheet, have you noticed that when you write h1 or other elements, the font is relatively large and bold, this is the style sheet of the browser The role of html is just the structure, and what really needs to play a display role must be controlled by css.

In addition to the browser's default style sheet, there are also css styles written by ourselves, called author style sheets.

Then, the first step in the calculation process of the attribute value is to determine the declaration value. If there is no conflicting declaration in the author's style sheet and the browser's default style sheet, the value will be assigned directly:

insert image description here