Css inheritance and cascade, css inheritance and cascade

Css inheritance and cascade, css inheritance and cascade

This section describes how to use the document structure and css selector to apply various styles to elements. Let's take a look at css cascade and inheritance. Let's talk about the concept first.

Inheritance: the mechanism used by an element to pass attribute values to its child element. The popular point is that some attributes of an element can be inherited and passed to the child element.

For example:

<P> <span> test inheritance </span> the content is not in the span. </p>

P {color: red}. here we can see that the text in the p element and the trial element is red, because the property of the p element is 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 should be understood together with cascade.

Cascade: when determining which styles should be used for an element, we need to consider the special nature of inheritance and Declaration together to enable which css style. This process is called cascade.

As we mentioned above, let's focus on it.

First, a question is thrown. Which of the following two rules will win?

H1 {color: red}
Body h1 {color: blue}

H2 {color: red}
H2.color {color: green}

In the above two pairs of rules, there is obviously only one winner, but which one should win? The answer lies in the particularity of each selector.

The specific characteristics of a selector are as follows:
1. For each ID attribute value given in the rule, the special value is 0, 1, 0, 0.
2. For each class in the rule, select the attribute-compliant and pseudo-class. For the special type, add
3. For each element and pseudo element in the rule, the particularity is 0, 0, 1
4. The delimiter and wildcard do not contribute to the particularity.
5. Special inline styles plus
6. The inherited attributes do not have any special characteristics, or even none. Therefore, they must be lower than the wildcard.
7 .! Important always wins.

Therefore, the above two rules have the result:

H1 {color: red} 0, 0, 1, 1
Body h1 {color: blue} 0, 0, 0, 2

H2 {color: red} 0, 0, 1, 1
H2.color {color: green },
So red and green will take effect.

The cascade rules are as follows:

1. Find all the delimiters in your code.

2. The display weight sorting and origin sorting of the rule, marked! The important style has the highest priority and has three origins: producer, reader, and user agent.

3. Special sorting of element declarations.

4. Sort element declarations in sequence.