欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-20 14:29:51
...
  记得大学时候,专业课的网页设计书籍里面讲过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       

  第三种写法的好处就是,不管需求怎么变,都可以轻松覆盖样式,也可以避免第一种写法存在的style="height:auto;"的情况。因为height:auto;有时也是致命的,在项目中就遇到过这样的问题。

  缺点就是要向头部插入一个style节点,对于小需求的话就有点小题大做。但是大项目中,可以内部默认一个style节点负责插入这些暂时性修改的样式数据,方便删除,不弄脏代码。

  最后提一个很重要的点:在IE下,style节点最多是31个,多了它不认,呵呵~