Cascading is a mechanism for resolving CSS declaration conflicts. (a,b,c,d)
Declaration conflict: Multiple identical CSS declarations applied to the same element.
Cascading mechanism
1. Compare priorities
When conflicts occur, those with higher priorities will be retained, and those with lower priorities will be eliminated.
The priority of a claim, relative to its origin and importance.
Source: Author Style Sheet, Browser Default Style Sheet, User Style Sheet
Importance: Property value followed! important, it means an important declaration
Example: color: red !important;
Priority (for developers only): browser < author's ordinary declaration < author's important declaration
2. Compare specificity
Each statement has a specificity, a specific value or degree.
In the event of conflict, the attributes are also high reserved and low eliminated.
Special attributes, depending on the size of the scope of the rule.
The larger the scope of application of the rule, the lower the specificity, and the smaller the scope of application, the higher the specificity.
Particularity: Inline style sheet > id selector > class selector > element selector > wildcard selector,
the larger the a, the higher the attribute. If a is the same, compare b, and so on
. A: declare inline style, declare it as 1, otherwise it is 0.
b: The number of id selectors in the rule.
c: The number of class selectors, pseudo-class selectors and attribute selectors in the rule.
d: The number of element selectors and pseudo-element selectors in the rule.
When computing selector groups, they should be computed separately.
3. Compare the source order
. The statement that appears last is born, and all others are eliminated.