Detailed explanation of CSS inheritance and cascading

In the previous section, we introduced how to use document structure and CSS selectors to apply various rich styles to elements. Today, let’s talk about CSS cascading and inheritance. Let’s talk about the concepts first.

Inheritance: The mechanism used by an element to pass attribute values to its descendant elements. To put it simply, some attributes of an element can be passed to child elements through inheritance.

##For example:

Test inheritanceThis is not span The content in

##p{color:red}, here you will see that the text in the p element and the trial element turns red because of the attributes of the p element Inherited by span. However, some attributes cannot be passed through inheritance.

For example, border will not be obtained through inheritance. In fact, inheritance is easy to understand, but it must be understood together with cascading.
Cascading: When determining which styles should be used for an element, you need to consider the particularities of inheritance and declaration together, so which css style should be enabled. This process is It’s called cascading.

The particularity was mentioned above, so let’s take a look at it.

Let me ask a question first. Which of the following two pairs of rules will win?

h1{color:red}

body h1{color:blue}
h2{color:red}

h2.color{color:green}
Of the two pairs of rules above, obviously only one can win, but which one should win? The answer lies in the specificity of each selector.

The specific specificity of a selector is as follows:

1. For each ID attribute value given in the rule, the specificity is increased by 0,1 ,0,0
2. For each class selection in the rule that matches the attribute selector and pseudo-class, the specificity is added by 0,0,1,0
3 .For each element and pseudo-element in the rule, the specificity is 0,0,0,1
4. Combiners and wildcards do not contribute anything to the specificity.
5. The specificity of inline styles is increased by 1,0,0,0
6. Inherited properties have no specificity, not even 0 specificity , so it should be lower than wildcard.
7.!important will always win.
So for the above two sets of rules, there are results:

h1{color:red}

##body h1{color:blue} 0,0,0,2
h2{color:red} 0,0,0,1

h2.color{color:green} 0,0,1,0
So red and green will take effect.
So, the cascading rules are as follows:

1. Find all the selectors in your code.

2. Display weight sorting and origin sorting of rules, mark! The important style takes precedence and has three origins: producer, reader, and user agent.

3. Order of specificity of element declarations.

4. Sort the order of appearance of element declarations.

For more detailed explanations of css inheritance and cascading, please pay attention to the PHP Chinese website!