The author has been searching on the Internet for a long time and found the same content about the weight of CSS selectors. The most important one is the figure below
The particularity is divided into four levels. Each level represents a kind of selector. The value of each level is the number of selectors it represents multiplied by the weight of this level. Finally, the value of all levels is added to get the special value of the selector.
The four levels are defined as follows:
1. First class: represents the inline style, such as: style = ", with a weight of 1000. 2. Second class: represents the ID selector, such as ා content, with a weight of 100. 3. Third class: representative class, pseudo class and attribute selector, such as. content, with a weight of 10. 4. The fourth class: represents the type selector and pseudo element selector, such as div p, with a weight of 1.
The calculation method is to add as many as possible, and the maximum value is the displayed css style.
But the author tried and found something wrong.
div#test0 div#test1 div#test2 div#test3 div#test4 div#test5 div#test6 div#test7 div#test8 div#test9 div#test10 h1{
color: blue;
}
According to the above weight algorithm, the above one should have 1112, which is greater than the inline 1000. Therefore, h1 should display blue, but in fact, the inline color is still used. The program code is as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin:0;padding:0;border:0; } div#test0 div#test1 div#test2 div#test3 div#test4 div#test5 div#test6 div#test7 div#test8 div#test9 div#test10 h1{ color: blue; } </style> </head> <body> <div id="test0"> <div id="test1"> <div id="test2"> <div id="test3"> <div id="test4"> <div id="test5"> <div id="test6"> <div id="test7"> <div id="test8"> <div id="test9"> <div id="test10"> <h1 style="color: red;">h1</h1> <h1>h1</h1> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
The author's point of view: the principle of css selector should be that the more accurate the weight is, the greater the value added between the same level can be compared. For different levels, the smaller the display level should be selected.