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

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, bootstrap