What are the metrics for precedence in CSS? Introduction to the use of CSS weights

What this article brings to you is what are the metrics for precedence in CSS? The use of CSS weights introduced, there is a certain reference value, the need for friends can refer to, I hope to help you.

I. BACKGROUND

There are three main features of CSS: cascading, inheritance , priority .

While we are defining styles for CSS, it often appears that two or more rules apply on the same element, and the effect that the element ultimately renders in the browser is which rule is applied? This is a matter of priority .

CSS precedence is measured by CSS weights, and weights are calculated as a set of formulas, as in the following specification:

Use a 4-digit string to represent the level, from left to right, to the left, to the right in descending order, and no binary between the digits, level insurmountable. No binary means: Even the weights of 10 tags will not be greater than the weight of the class selector, and, by analogy, the weight of the 10 class selector is less than the ID selector.

contribution value of inheritance or *	0,0,0,0
Contribution value for each element (label)	0,0,0,1
Each class, pseudo-class contribution value	0,0,1,0
Each ID contribution value	0,1,0,0,
Per-inline contribution value	1,0,0,0
Each!important	Infinity

Second, the calculation example of weight

Take a look at the code for example:

<div>    <ul>        <li>1</li>        <li class= "Red" >2</li>        <li  class= "Red" id= "Blue" >3</li>        <li  class= "Red" id= "Blue" >4</li>        <li>5</ li>        <li>6</li>    </ul></div>

First give Li the following style:

Div UL li{/  * The weight of this selector is 0,0,0,3*/    width:200px;    height:30px;    border:1px solid #000;    Background-color:pink;    }

Weight of the tag Selector

Selectors p ul li are descendant selectors, the weights of the three tags are (0,0,0,1), because it is the same level selector, weights can be added, p ul li the final weight is (0,0,0,3).

Weight of class Selector

Add style to. Red based on the above style .red{background-color:red;} effect as follows:

Weights: class, Pseudo class selector > tag Selector

The weight of the ID selector

On the basis of the above styles, add a style effect to Li with ID named Blue #blue{background-color:blue;} as follows:

ID selector > class, pseudo class selector > tag Selector

inline style

Adds an inline style to the 4th Li based on the above style

<li class= "Red" id= "Blue" style= "" >4</li>

The effect is as follows: The background color of the 4th Li shows only the settings of the inline style, and the others are overwritten.

Inline style >id selector > class, pseudo class selector > tag Selector

Composite selector Weight Calculation for example:

Div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2    (2 labels, 1 classes) a:hover      -----— >      0,0,1,1     (a label, a pseudo-Class). Nav a       ------>      0,0,1,1   (one label, one class) #nav P       ----->       0,1,0,1   (1 IDs, one label)

Iii. Summary of priority levels

Summary sort:!important > Inline style >id selector > class selector > Label > Wildcard > Inherit > Browser Default properties

Special cases to be aware of:

1. The inherited style has a weight of 0. That is, in a nested structure, regardless of the weight of the parent element's style, when the quilt element inherits, his weight is 0, which means that the style defined by the child element overrides the inherited style.

2. In-line style takes precedence. The element that applies the style attribute has a very high weight in its inline style, which can be interpreted as much larger than 100. In short, he has a higher priority than the above-mentioned selectors.

3. While the weights are the same, the CSS follows the nearest principle. That is, the style closest to the element has the highest priority, or the last style has the highest precedence.

4. The CSS defines a!important command that is given the highest priority. This means that regardless of the weight and the location of the style,!important has the highest priority.