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

时间：2022-08-21 10:49:24

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

导航

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

废话就不多说了

CSS 2.1 selectors, Part 1

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

  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,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。

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

相关文章