CSS Priority Calculation

1   Principle 1: it is better to specify inheritance  2   Principle 2: # ID>. Class> tag Selector  3   Principle 3: more specific and more powerful  4   Principle 4: Tag # ID> # ID; tag. Class>. Class  5   6   CSS priority weight calculationAlgorithm  7   8   The CSS priority includes four levels (TAG selection, Id selection, class selection, and element selection) and the number of occurrences of each level!  9  10   The CSS priority is calculated based on the number of occurrences of these four levels.  11   12   The CSS priority calculation rules are as follows:  13   * Add, and 0 to the style defined in the element label.  14   * Each ID selector (for example, # ID) is added with 0, 1, 0, and 0.  15   * Each class selector (such as. Class), each attribute selector (such as [attribute =]), and each pseudo class (such as: hover) plus  16   * Each element selection character (such as P) or pseudo element selection character (such as firstchild), plus 0, 0, 1, 1  17  Then, accumulate the four numbers to obtain the priority value defined by each CSS,  18   Then compare the size from left to right, and the priority of CSS styles with large numbers is higher.  19   20   Example:  21   If defined in a CSS file or <style>:  22   1. h1 { Color : Red ;} 23   /*  An element selector. The result is 0, 0, and 1. */  24   2. Body H1 { Color : Green ;} 25   /*  The two element delimiters are 0, 0, 0, and 2.  */  26   3. h2.grape { Color : Purple ;} 27   /* An element selector and a class selector. The result is 0, 0, 1, and 1.  */  28   4. Li # answer { Color : Navy ;} 29   /*  An element selector and an ID selector. The result is 0, 1, 1.  */  30   If the style attribute of an element is defined as follows:  31   H1 { Color :Blue ;} 32   /*  An element selector defined in an element label. The result is ,.  */  33   34   In this case, the H1 element is blue.  35   Note:  36   1 ,! The important declaration has the highest style priority. If a conflict occurs, the calculation is performed.  37   2. If the priorities are the same, select the final style.  38   3. The inherited style has the lowest priority.