前端极易被误导的css选择器权重计算及css内联样式的妙用技巧_html/css_WEB-ITnose
我只想说：真是误人子弟，害人不浅！
最近，在前端群里还发现以上观点类似的奇葩聊天，真是***
其实，也是在很久以前，看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章（个人站点已失效，就不贴出来了），才了解到真正的css选择器权重计算。
以下是css选择器权重计算精华所在，翻译自国外的文档(记得是W3C给出的计算规则)
如果一个声明来自style属性而不是选择器，计作1或者a=1（在一个html文档中，元素“style”的值是样式表规则，这个规则中没有选择器，所以a=1, b=0, c=0, and d=0）
选择器中id属性的个数,计作b
选择器中其他属性以及伪类的个数，计作c
选择器中元素及伪元素的个数，计作d
优先级只基与选择器的形式，特殊的，一个“[id=p33]“形式的选择器是按照属性选择器来计算的（a=0, b=0, c=1, d=0），即使用定义中包含ID
一些例子：
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 */
[备注]
:first-line 伪元素
[rel=up] 其他属性
了解了这些 你应该不会再对”11个class与一个id”谁的优先级高“这类的问题有疑问了吧，因为a,b,c,d只是在各自位置数字的累加，而不会越级。
其实，这里还漏了一个重要的东西，那就是!important了。这是一个神奇的东西~
首先强调的是!important的使用问题：如height:100px !important; 菜鸟一定会疑问，为什么important前面要加空格，其实没什么，不加也可以，只是为了阅读方便，呵呵~
important可以让前面所有的权重计算变得可笑，因为css属性值添加了important后，前面所有的努力白费了，行内式的权重也高不过它，除非再声明一个加important的属性值来覆盖它(注意是由css属性值读取的顺序决定的)。
比如h1{height:100px !important;}要覆盖这个height值为200px的话，要在其后加上h1{height:200px !important;}
而一般!important值的相互覆盖，是取决于浏览器在加载css文件时，对样式表的读取顺序决定的。在大项目中，很难预料你的文件是先加载还是后加载，特别是公用css文件，不建议加这个特殊值。
讲到这里，提个额外的点：css样式的读取解析，是按从右到左进行的，所以不要误以为写#id .class1 .class2 .class3{}这样的选择器，浏览器会因为唯一id存在而查找很快，其实是更慢，最好是保持三个层级，不要层级过多。
还有，很多人喜欢写.class1.class2{}这样的交集选择器，一般是跟js配合做一些显示效果。关键是IE6不支持这种交集选择器，像p.class1{}这样的标准复合选择器，IE6等低版本浏览器才能完美支持。（ps：公司同事踩过这个坑，在IE6下把我的css代码给覆盖了，我还查了老半天??最后知道真相的我眼泪掉下来）
其实，懂得上面的这些东西了，你的css水平才算入门（没错，只算入门）。
接下来，讲一些很实用的技巧（其实也就是上面基础知识的融会贯通）：
场景：当鼠标hover到id为content的div后，将高度由auto改变为30px;
1.菜鸟级写法
1 $("#content").hover(function(){2 $(this).css({"height":"30px"});3 },function(){4 $(this).css({"height":"auto"});5 }); 那如果这个div本身height不是auto呢，你是不是又得知道其默认的height属性值。
所以这种写法很不好，学术一点的叫做硬编码、强耦合。
2.普通写法
1 .content_normal{height:20px;} /*默 认应用的样式*/2 .content_change{height:30px} /*hover时候应用的样式*/
1 $("#content").hover(function(){2 $(this).addClass("content_change");3 },function(){4 $(this).removeClass("content_change");5 });
3.适用性的高级写法
var $extStyle = $("head").find("#extStyle");$("#content").hover(function(){ //向头部插入一个内链样式表 if($extStyle.length 第三种写法的好处就是，不管需求怎么变，都可以轻松覆盖样式，也可以避免第一种写法存在的style="height:auto;"的情况。因为height:auto;有时也是致命的，在项目中就遇到过这样的问题。
缺点就是要向头部插入一个style节点，对于小需求的话就有点小题大做。但是大项目中，可以内部默认一个style节点负责插入这些暂时性修改的样式数据，方便删除，不弄脏代码。
最后提一个很重要的点：在IE下，style节点最多是31个，多了它不认，呵呵~