CSS选择器、优先级与匹配原理

编程之家收集整理的这篇文章主要介绍了CSS选择器、优先级与匹配原理编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好

废话就不多说了

CSS 2.1 selectors,Part 1

计算指定选择器的优先级:重新认识CSS的权重

@H_301_10@
  • 通配选择符的权值 0,0
  • 标签的权值为 0,1
  • 类的权值为 0,1,0
  • 属性选择的权值为 0,1 0,0
  • 伪类选择的权值为 0,0
  • 伪对象选择的权值为 0,1
  • ID的权值为 0,0
  • important的权值为最高 1,0
  • 使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。

    从上面我们可以得出两个关键的因素:

    @H_301_10@
  • 权值的大小跟选择器的类型和数量有关
  • 样式的优先级跟样式的定义顺序有关
  • 记得以前看过一篇文章 256个class类名选择器干掉一个id选择器实例页面

    http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

    Gecko overflows the count of classes into the count of IDs,each of which holds 8 bits.
    
    — Cameron McCormack (@heycam) August 16,2012
    
    

    给出的答案是:所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class,势必会越过其边缘,溢出到id区域。

     

    总结:

    比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级,大家应该已经很清楚了,就是:

    important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配 通配符 > 继承

    这也就解释了为什么11个标签的定义会比不上1个类的定义,1个类加11个标签会比不上2个类的权重高。

     

     

    选择器种类

    查阅资料归纳下大概有如下几种:

    • 通配选择器

    • 类型选择器

    • ID选择器

    • 类选择器

    • 包含选择器

    • 子元素选择器

    • 相邻兄弟选择器

    • 属性选择器

    css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到

     

    关于CSS的执行效率:

    @H_301_10@
  • 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出
  • 如果你非常在意页面性能那千万别使用CSS3选择器。实际上,在所有浏览器中,用 class 和 id 来渲染,比那些使用同胞,后代选择器,子选择器(sibling,descendant and child selectors)对页面性能的改善更值得关注。
  •  

    Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:

    @H_301_10@
  • 1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)

  • 上面九种选择器中ID选择器的效率是最高,而伪类选择器的效率则是最低

  • 详细的介绍大家还可以点击Writing efficient CSS selectors

  • 总结

    以上是编程之家为你收集整理的CSS选择器、优先级与匹配原理全部内容,希望文章能够帮你解决CSS选择器、优先级与匹配原理所遇到的程序开发问题。

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    小编个人微信号 jb51ccc
    喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

    相关文章

    猜你在找的Bootstrap相关文章

    BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起。下面直接上图,看看完成后的结果:
    顶求网首页是一个web2.0博客类的网站首页,在该网站中用户可以发表博客,也可以推荐图书给其他用户。所以,在首页中主要分三个板块——文章、图书、用户。另外,网站的头部和尾部还要有导航(navigato
    在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了'h
    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必
    先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b
    先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个“前5页”和“后5页”显得有点多余,因为点击当前显示第一页
    在做WEB开发的时候我们经常会遇到分页的处理,如果在PC上显示网页的话,使用传统的分页是可以接受的。那么,当我们为手机或其他移动端设计界面的话,使用分页未免有些笨拙和难以使用,这时候我们可以使用在单页
    为了和文章分类部分的样式进行区分,我决定自己动手写一个具有其他样式的分类标签集。刚好看到豆瓣读书板块的首页中的图书分类标签还不错,于是决定自己写一个类似的样式。首先是HTML代码部分: 可以看到图书分
    微信公众号搜索 “ 程序精选 ” ,选择关注!
    微信公众号搜 "程序精选"关注