The particularity, inheritance, cascade in CSS

Objective

Recently in the "CSS authoritative guide", the third chapter of the book "Structure and Cascade" on the particularity of the interpretation is very in place, today to organize the ideas, recorded as follows.

Introduce problems

　　

A very simple list structure, then you want to set the font color for the "first" typeface, there are two possible ways:

　　

So the question is, what color will the font become?

CSS rule structure

　　

The structure of each CSS rule is as follows, please remember their name, otherwise it will be uncomfortable to move on.

Particularity

The concept and function of particularity are described in detail in the book:

For each rule, the user agent (browser) calculates the particularity of the selector and attaches this particularity to the individual declarations in the rule.

If an element has two or more conflicting attribute lives, then the statement with the highest specificity will prevail.

The whole is divided into two parts: calculation and comparison. First see certainly do not understand, then first use up, no matter when come back to see, suddenly enlightened.

Rules for the calculation of particularity

According to the particularity of the introduction, how to calculate the particularity is very important, the following is the book given in the calculation rules:

1. Inline style: 1,0,0,0

2. ID Selector: 0,1,0,0

3. class Selector, attribute selector, pseudo-class selector: 0,0,1,0

4. Element selector, pseudo element selector: 0,0,0,1

5. Wildcard selector: 0,0,0,0

6. Binding, Inheritance: no particularity

7.!important: According to the keyword is divided into two groups, the respective calculation

Note: There is no relationship between the four groups of numbers, there is no rounding.

The above rules cover all possible CSS selectors, which can be used to calculate the specificity of the relevant selectors, which the browser assigns to each declaration in the declaration block.

　　

There are countless examples of these, and they can be counted.

The comparative rule of particularity: Cascade

The introduction of the special, we know that the specific calculation is to compare, and then decided to win the style of display, the comparison of rules called cascading, of course, if the declaration of conflict in the case. The rules are as follows:

1. Compare by weight First:

Reader important style > creator important style > creator Normal style > reader Normal style > browser default style

2. When the foregoing conditions cannot be compared, the following particulars are compared:

The particularity compares each group of numbers from left to right, such as: 1,0,0,1 and 0,2,0,0, which are displayed according to the former definition style.

3. When the foregoing conditions cannot be compared, they are compared in the order of occurrence:

Will overwrite the first occurrence.

According to the above rules, the answer to the question: the color will be as follows:

　　　　

Summary

The first time to organize the blog, the harvest is very large, usually read most of the past, this time really learned.

The particularity, inheritance, cascade in CSS