The css selector weight calculation and css inline style tricks on the front end that are easily misled_html/css_WEB-ITnose

I remember when I was in college, professional web design books talked about the calculation of CSS selector weights: id is 100, class is 10, html tag is 5, etc., and then the sum of them all is added up. Compare. . .
I just want to say: It’s really misleading and harmful to people!

Recently, I also found strange chats with similar views to the above in the front-end group. It was really ***

In fact, it was also a long time ago that I saw a front-end engineer from Tencent ISUX - Mai Shi I only learned about the real css selector weight calculation through a technical article I shared (my website is no longer valid, so I won’t post it here).

The following is the essence of css selector weight calculation, translated from foreign documents (remember the calculation rules given by W3C)

If a statement comes from the style attribute rather than the selector, it will be counted as 1 or a=1 (in an html document, the value of the element "style" is a style sheet rule. There is no selector in this rule, so a=1, b=0, c=0, and d=0)
The number of id attributes in the selector is counted as b
The number of other attributes and pseudo-classes in the selector is counted as c
The number of elements and pseudo-elements in the selector is counted as d
The priority is only based on the form of the selector. Specifically, a selector in the form of "[id=p33]" is calculated according to the attribute selector (a=0, b=0, c=1, d=0 ), even if the ID is included in the definition
Some examples:

 1 * {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */ 2 li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */ 3 li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */ 4 ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */ 5 ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */ 6 h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */ 7 ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */ 8 li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */ 9 #x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */10 style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

[Remarks]
:first-line pseudo-element
[rel=up] Other attributes

After understanding these, you should no longer have questions about "who has higher priority among 11 classes and one id", because a, b, c, d are just the accumulation of numbers at their respective positions, and will not skip levels.

Actually, there is another important thing missing here, that is! important. This is a magical thing~

<.> The first thing to emphasize is the use of !important: such as height:100px !important; Newbies will definitely wonder why there is a space in front of important. In fact, it doesn’t matter. It’s okay not to add it. It’s just for the convenience of reading. Haha~

Important can make all the previous weight calculations ridiculous, because after important is added to the css attribute value, all the previous efforts are in vain, and the weight of the inline style is not higher than it, unless another attribute value with important is declared to cover it It (note that it is determined by the order in which css attribute values ​​are read)

For example, if h1{height:100px !important;} wants to overwrite the height value to 200px, add h1{height after it. :200px !important;}

Generally, the mutual coverage of !important values ​​depends on the order in which the browser reads the style sheet when loading the css file. In large projects, it is difficult to predict. Whether your file is loaded first or last, especially for public css files, it is not recommended to add this special value

Speaking of this, let me mention an additional point: css style reading and parsing is. It is done from right to left, so don’t mistakenly think that writing a selector like #id .class1 .class2 .class3{} will cause the browser to search quickly because the unique id exists. In fact, it is slower. It is best to keep three levels, not too many levels.

Also, many people like to write intersection selectors like .class1.class2{}, usually in conjunction with js to create some display effects. The key is that IE6 does not support this kind of intersection selector. Standard compound selectors like p.class1{} can only be perfectly supported by lower version browsers such as IE6. (ps: A colleague from the company stepped on this pitfall and overwrote my css code under IE6. I checked it for a long time?? When I finally found out the truth, I shed tears)

　　

In fact, your CSS level is considered entry-level only if you understand the above things (yes, it is only considered entry-level).

Next, let’s talk about some very practical skills (actually, it is the integration of the above basic knowledge):

Scenario: When the mouse hovers to the div with the id of content, change the height from auto is 30px; Know its default height property value.

So this way of writing is very bad. It is called hard coding and strong coupling in academic terms.

　2. Common writing

1 $("#content").hover(function(){2     $(this).css({"height":"30px"});3 },function(){4     $(this).css({"height":"auto"});5 });

　3. Applicability Advanced writing method

1 .content_normal{height:20px;} /*默 认应用的样式*/2 .content_change{height:30px} /*hover时候应用的样式*/

The advantage of the third writing method is that no matter how the needs change, the style can be easily overwritten, and the style="height of the first writing method can be avoided. :auto;" situation. Because height:auto; is sometimes fatal, I have encountered such a problem in the project.

1 $("#content").hover(function(){2     $(this).addClass("content_change");3 },function(){4     $(this).removeClass("content_change");5 });

The disadvantage is that you have to insert a style node into the head, which is a bit fussy for small needs. However, in large projects, a style node can be internally defaulted to be responsible for inserting these temporarily modified style data, so that it can be easily deleted without dirtying the code.

Finally, let me mention a very important point: under IE, the maximum number of style nodes is 31. If there are more, it will not recognize it, haha~

var $extStyle = $("head").find("#extStyle");$("#content").hover(function(){        //向头部插入一个内链样式表    if($extStyle.length < 1){         var styleElem = document.createElement("style");         styleElem.setAttribute("type", "text/css");         styleElem.setAttribute("id", "extStyle");          $("head").append(styleElem);         $extStyle = $("head").find("#extStyle");      }         $extStyle.append("#content{height:30px;}");},function(){     $extStyle.empty();});