CSS selector weight and precedence rules

In CSS, the order of defined style rules will be determined based on the specificity of the selector. Rules with more specific selectors take precedence over rules with general selectors. If the specificity of the two rules is the same, then Rules defined later take precedence We often encounter this situation when using CSS to define styles for web page elements: we need to apply general styles to general elements and then override them on more specific elements. So how do we ensure that our newly defined element style can overwrite the original style on the target element?

In CSS, the order of defined style rules is determined based on the specificity of the selector. Rules with more specific selectors take precedence over rules with general selectors. If the specificity of the two rules are the same, then the rule defined later takes precedence.

So, how to calculate the specificity of the selector? The picture below introduces the calculation method of specificity:



We divide specificity into 4 levels. Each level represents a type of selector. Each level The value is the number of selectors it represents multiplied by the weight of this level, and finally the values ​​of all levels are added up to get the special value of the selector.

The four levels are defined as follows:

First level: represents inline style, such as: , the weight is 1000.
Second level: represents the ID selector, such as: #content, with a weight of 100.
Third level: Representative classes, pseudo-classes and attribute selectors, such as .content, with a weight of 10.
Fourth level: Represents type selectors and pseudo-element selectors, such as p p, with a weight of 1.

For example, in the above picture, #NAV is the second-class selector, .ACTIVE is the third-class selector, and UL, LI and A are the fourth-class selector. Then the value of the specificity of the entire selector expression is 1*100+1*10+3*1=113

The following are some calculation examples:



Note: Universal selectors (*), sub-selectors (>) and adjacent sibling selectors (+) are not in these four levels, so their weights are all 0.
Let’s look at a specific example: If there are the following set of style rules, can you tell what color the two titles in the HTML code are?

#content p#main-content h2{   
    color:red;   
}   

#content #main-content>h2{   
    color:blue
}   
body #content p[id="main-content"] h2{   
    color:green;   
}   

#main-content p.paragraph h2{   
    color:orange;   
}   
#main-content [class="paragraph"] h2{   
    color:yellow;   
}   
p#main-content p.paragraph h2.first{   
    color:pink;   
}

The following is the HTML code:

<p id="content">
    <p id="main-content">
        <h2 id="CSS简介">CSS简介</h2>
        <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
        <p class="paragraph">
            <h2 id="使用CSS布局的优点">使用CSS布局的优点</h2>
            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
        </p>
    </p>
</p>

Have you judged it? The answer is: both titles are red!
Let us calculate the specificity values ​​of each of the six style rules:
The value of the first specificity=2*100+2*1=202
The value of the second specificity =2*100+1=201
The value of the third particularity=1*100+1*10+3*1=113
The value of the fourth particularity=1*100+1*10 +2*1=112
The value of the fifth particularity=1*100+1*10+1*1=111
The value of the sixth particularity=1*100+2*10+3 *1=123
Clearly, the first style rule won the championship of this style selector specificity contest with a high score of 202. Although the following rules may seem more complicated, they are not specific. It’s not about who should write the selector expression longer, the ID selector is the way to go!
Understanding the specificities of selectors is important, especially when fixing bugs, because you need to understand which rules take precedence and why.
If you encounter a CSS rule that doesn't seem to be working, it's likely that a specificity conflict has occurred. Please add the ID of one of its parent elements to your selector to make it more specific. If this solves the problem, there's probably a more specific rule somewhere else in the stylesheet that overrides yours. If this is the case, you may want to review your code, resolve specificity conflicts, and make the code as concise as possible.

For more articles related to the weight and priority rules of CSS selectors, please pay attention to the PHP Chinese website!