CSS的选择器与权重规则

[子虔]

写这些的原因

11年至今已经没有写过CSS了，其实我挺喜欢写CSS、写页面的（可惜现在的工作只能写JS），真怀念那些年写页面的日子。心里一致有重新拾起的想法，于是今天终于痛下决心，从规范上，系统上学习与整理下。

谈谈兼容的那些事儿

在前端开发中，肯定会有兼容浏览器这一项。比如页面要兼容IE6+，firefox,chrome等。这些兼容问题一般有两个方面造成的

1. 浏览器自身的bug;
2. 浏览器发布时基于的CSS规范已经过时，新规范中的功能没有被实现；

比如IE6，IE6的发布时间是2001年（随XP一起发布）。按照软件发布的时间周期，大致再向前推2年，也就是99年左右，这的时候左右，CSS1.0是被推荐的规范。所以 并不是IE6不怎么好，而CSS越来越完善，IE6没有跟上它的脚步而已 。如下表（来自：w3cschool）

规范	草案/提议	推荐
CSS 1		1996 年 12 月 17 日
CSS 1 (Revised)		1999 年 1 月 11 日
CSS 2		1998 年 5 月 12 日
CSS 2.1	2007 年 7 月 19 日

范围

在CSS1.0和CSS2.1之间还有个版本叫CSS2.0.因CSS2.0与CSS2.1在此部分内容差不多，不再进行别外的介绍了，本文分别从CSS1.0,2.1,3.0三个规范版本整理下CSS的selector和它的权重计算规则。

CSS1.0

选择器列表

名称	例子
Class Selector	.selector
ID Selector	#box
Contextual Selector	h1,em
Pseudo-classes	:link,:visited,:active
Pseudo-elements	:first-line,:first-letter

权重规则

1. 计算selector中的id数量计为a;
2. 计算selector中的class数量计为b;
3. 计算selector中的tag数据计为c;
4. 从上所得，此selector的权重为a100+b10+c*1的值

备注：

1. 选择器class selector不支持多class选择器，如.a.b;

2. 权重规则中并没有把pseudo-classes和pseudo-elements置入计算规则内，如下列：在CSS1.0规范中，两个选择器的权重是一样的，根据就近原则，CSS1.0规范显示为blue;

   a:link{
       color: red;
   }
   
   a{
       color: blue;
   }
   

CSS2.1

CSS2.1 是基于 CSS2.0 进行扩展的，而CSS2.0是基于 CSS1.0 进行的扩展，因此本段落，相对CSS1.0规范进行比较。

相对CSS1.0规范，在其它基础上优化了分类，并增加了选择器，如下表：

名称	例子
Universal selector	如 *
Type selectors	如 body,div
Descendant selectors	如 div span，body div
Child selectors	如 ul > li
pseudo-class	:first-clild,:focus,:hover,:lang
Adjacent selectors	如 .cls1 + .cls2
Attribute selectors	如a[href],a[title="123"],a[href$="html"],a[class~="a"]
pseudo-elements	:before,:after

权重计算规则（不同于CSS1.0）

1. 计算selector所对应的style属性，如果符合selector规则则计a为1;
2. 计算selector中所对应的id属性的数量，计为b;
3. 计算selector中所对应的其它属性和pseudo-class的个数，计为c;
4. 计算selector中所对应的tag name和pseudo-elements的个数，计为d
5. 从上所得，此selector的权重为a1000+b100+c10+d1的值；

CSS3.0

这个太多了，详情还是看手册或文档吧！^_^

参考资料

1. CSS1.0规范
2. CSS2.0规范
3. CSS2.1规范
4. CSS3.0规范 和 手册