I have suffered a loss in terms of specificity, and it’s time to sort it out~
Let’s talk about the general selector first, and the code
The most authoritative one is the "Css Authoritative Guide" 》
We divide the specificity into 4 levels. Each level represents a type of selector. The value of each level is the number of selectors it represents multiplied by this The weight of one level, and finally the special value of the selector is obtained by adding the values of all levels.
The four levels are defined as follows:
l First level: represents inline style, such as: , with a weight of 1000.
l Second level: represents the ID selector, such as: #content, with a weight of 100.
l Third level: representative classes, pseudo-classes and attribute selectors, such as .content, with a weight of 10.
l Fourth level: represents type selectors and pseudo-element selectors, such as div p, with a weight of 1.
Note: Universal selectors (*), sub-selectors (>) and adjacent sibling selectors ( ) are not in these four levels, so their weights are all 0.
The chestnuts are here
<html>#content div#main-content h2{color:red; }/*=2*100+2*1=202*/#content #main-content>h2{color:blue }/*=2*100+1=201*/body #content div[id="main-content"] h2{color:green; }/*=1*100+1*10+3*1=113*/#main-content div.paragraph h2{color:orange; }/*=1*100+1*10+2*1=112*/#main-content [class="paragraph"] h2{color:yellow; }/*=1*100+1*10+1*1=111*/div#main-content div.paragraph h2.first{color:pink;}/*=1*100+2*10+3*1=123*/</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
