What is the measure of priority in css? Introduction to the usage of css weight

The content of this article is about what is the measurement standard of priority in CSS? The introduction to the usage of CSS weight has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Background

CSS has three major characteristics: cascading, inheritance, and priority.

When we define styles for CSS, two or more rules often apply to the same element. Which rule is applied to the final rendering effect of the element in the browser? This requires considering the issue of priority.

CSS priority is measured by CSS weight. There is a set of calculation formulas for weight calculation, with the following specifications:

Use a 4-digit string to represent the level, from From left to right, the one on the left becomes larger, and towards the right it decreases in sequence, and there is no base between the digits, and the levels cannot be crossed. The absence of hexadecimal means: even the sum of the weights of 10 tags will not be greater than the weight of the class selector. By analogy, the weight of ten class selectors is also smaller than the id selector.

##Contribution value of each element (label)0, 0, 0, 1##Contribution value of each class and pseudo-classEach ID contribution value Each inline contribution value##Each!importantinfinity2. Weight calculation example

Inherited or * contribution value	0, 0, 0, 0
0, 0, 1, 0
0, 1, 0, 0,
1,0,0,0

Take the following code as an 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{  /*该选择器的权重是0，0，0，3*/
    width: 200px;
    height: 30px;
    border:1px solid #000;
    background-color: pink;
    }

Weight of label selector

Selector

p ul li

is a descendant selector. The weights of the three labels are all (0, 0, 0, 1) because they are selected at the same level. device, the weights can be added, and the final weight of

p ul li is (0, 0, 0, 3).

Weight of class selector

Add style to .red based on the above style

. red{background-color:red;}

The effect is as follows:

#Weight: class, pseudo-class selector> label Selector

The weight of the id selector

Add a style to the li with the id named blue based on the above style

#blue{background-color:blue;}

The effect is as follows:

##id selector>class, pseudo-class selector>label selector

inline Style

Add 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 only shows the inline style settings, and the others are covered.

#Inline style>id selector>class, pseudo-class selector>label selector

Compound selector weight calculation example:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2    (2个标签，1个类)

a:hover      -----—>      0,0,1,1     (1个标签，一个伪类)

.nav a       ------>      0,0,1,1   (1个标签，一个类)

#nav p       ----->       0,1,0,1   (1个id，一个标签)

3. Summary priority

Summary sorting: !important > Inline style >ID selector> Class Selector> Tag> Wildcard> Inheritance> Browser Default Properties

Special cases to note:

The weight of inherited styles is 0. That is, in a nested structure, no matter how much the weight of the parent element's style is, when it is inherited by a child element, its weight is 0, which means that the style defined by the child element will override the inherited style.

Inline styles take precedence. The weight of the inline style of an element with the style attribute applied is very high, which can be understood as much greater than 100. In short, it has a higher priority than the above-raised selectors.
When the weights are the same, CSS follows the proximity principle. That is to say, the style closest to the element has the highest priority, or the style ranked last has the highest priority.
CSS defines an !important command, which is given the highest priority. That is to say, regardless of the weight and the distance of the style position, !important has the highest priority.
Related recommendations:

4. css style weight priority_html/css_WEB-ITnose

Priority of CSS styles - Monkey Ape

The above is the detailed content of What is the measure of priority in css? Introduction to the usage of css weight. For more information, please follow other related articles on the PHP Chinese website!