记得大学时候，专业课的网页设计书籍里面讲过css选择器权重的计算：id是100，class是10，html标签是5等等，然后全部加起来的和进行比较。。。
我只想说：真是误人子弟，害人不浅！
最近，在前端群里还发现以上观点类似的奇葩聊天，真是***
其实，也是在很久以前，看了腾讯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
一些例子：
* {} /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */
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.菜鸟级写法
$("#content").hover(function(){
$(this).css({"height":"30px"});
},function(){
$(this).css({"height":"auto"});
});
那如果这个div本身height不是auto呢，你是不是又得知道其默认的height属性值。
所以这种写法很不好，学术一点的叫做硬编码、强耦合。
2.普通写法
.content_normal{height:20px;} /*默 认应用的样式*/
.content_change{height:30px} /*hover时候应用的样式*/
$("#content").hover(function(){
$(this).addClass("content_change");
},function(){
$(this).removeClass("content_change");
});
3.适用性的高级写法
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();
});
第三种写法的好处就是，不管需求怎么变，都可以轻松覆盖样式，也可以避免第一种写法存在的style="height:auto;"的情况。因为height:auto;有时也是致命的，在项目中就遇到过这样的问题。
缺点就是要向头部插入一个style节点，对于小需求的话就有点小题大做。但是大项目中，可以内部默认一个style节点负责插入这些暂时性修改的样式数据，方便删除，不弄脏代码。
最后提一个很重要的点：在IE下，style节点最多是31个，多了它不认，呵呵~
via:cnblogs.com/walls/p/4263463.html