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

导航

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

废话就不多说了

CSS 2.1 selectors, Part 1

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

  1. 通配选择符的权值 0,0,0,0
  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,1 0,0,1,0
  5. 伪类选择的权值为 0,0,1,0
  6. 伪对象选择的权值为 0,0,0,1
  7. ID的权值为 0,1,0,0
  8. important的权值为最高 1,0,0,0

使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。

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

  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关

记得以前看过一篇文章 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的执行效率:

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

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

  1. 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)

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

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

如果您看完本篇文章感觉不错,请点击一下右下角的【推荐】来支持一下博主,谢谢!

CSS选择器、优先级与匹配原理(转)的更多相关文章

  1. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  4. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  5. CSS选择器优先级(转)

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  6. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

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

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  8. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  9. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

随机推荐

  1. Controller 接口控制器详解

    Controller 控制器,是 MVC 中的部分 C,为什么是部分呢?因为此处的控制器主要负责功能处理部分:1.收集.验证请求参数并绑定到命令对象:2.将命令对象交给业务对象,由业务对象处理并返回模 ...

  2. android简单的夜间模式

    现在android项目values下打 attrs.xml <?xml version="1.0" encoding="utf-8"?> <r ...

  3. Centos的Inode及Block相关知识

    Centos的Inode及Block相关知识 时间:2016-06-04 01:54来源:blog.51cto.com 作者:"tao" 博客 举报 点击:173次 本经验均在Ce ...

  4. ueditor .NET版本提示uploader、Config类同时存在于两个dll中

    在网上查看了下,主要有两种解决办法 1.直接删除,以下引用. <%@ Assembly Src="Uploader.cs" %><%@ Assembly Src= ...

  5. linux设备驱动归纳总结(六):1.中断的实现【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-90740.html linux设备驱动归纳总结(六):1.中断的实现 xxxxxxxxxxxxxxxx ...

  6. Bind[Exclude|Include]排除字段或只允许字段验证

    public ActionResult xx([Bind(Exclude = "id")] xxModel xx, HttpPostedFileBase file)//排除id验证 ...

  7. git log用法【转】

    转自:http://www.cnblogs.com/gbyukg/archive/2011/12/12/2285419.html PHP技术交流群 170855791 git log 查看提交记录,参 ...

  8. XML 解析 -- IE ,Chrome

    通用的method <script type="text/javascript"> //for chrome, attach method to XMLDocument ...

  9. WPF:获取控件内的子项

    一.界面内容(部分:仅供参考) <Window> <Window.Resources> <!--工具数据源--> <XmlDataProvider x:Key ...

  10. 【转】用 SVN Importer 实现 CSVNT 到 SVN 的转换

    转载地址:http://www.blogjava.net/yongbing/archive/2007/03/04/101761.html 用 SVN Importer 实现 CSVNT 到 SVN 的 ...