前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

浏览数：20 / 时间：2015年06月09日

　　记得大学时候，专业课的网页设计书籍里面讲过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
　　一些例子：　　

 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 < 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();
});