CSS 优先选择级 详尽剖析

在讲CSS优先选择级以前，大家得要掌握甚么是CSS，CSS是用来做甚么的。

最先，大家对CSS作1个简易的表明：CSS是堆叠款式表（Cascading Style Sheets）的简称。它的标准意味着了互联网技术历史时间上1个与众不同的发展趋势环节。如今针对从业网页页面制做的盆友来讲，应当非常少沒有听闻过CSS了，由于在制做网页页面过 程中大家常常必须用到。

其次：大家能根据CSS为文本文档设定丰富多彩且易于改动的外型，以减轻网页页面制做者的工作中压力，从而减轻制做及后期维护保养的成本。

实际上如今还来说CSS是甚么，CSS有甚么功效彻底是过剩的，坚信从业网页页面制做的盆友都早已或多或少的触碰过了。

言归正传，大家刚开始进到今日的话题：

1、甚么是CSS优先选择级？

所谓CSS优先选择级，就是指CSS款式在访问器中被分析的前后次序。

2、CSS优先选择级标准

既然款式有优先选择级，那末就会有1个标准来承诺这个优先选择级，而这个“标准”便是本次所必须讲的关键。

款式表格中的独特性叙述了不一样标准的相对性权重，它的基础标准是：

1. 统计分析挑选符中的ID特性个数。
2. 统计分析挑选符中的CLASS特性个数。
3. 统计分析挑选符中的HTML标识名个数。

最终，按正确的次序写出3个数据，不必加空格或逗号，获得1个3位数(css2.1是用4位数表明)。( 留意，你必须把数据变换成1个以3个数据末尾的更大的数)。相应于挑选符的最后数据目录能够很非常容易明确较高数据特点凌驾于较低数据的。

比如：

1. 每一个ID挑选符(#someid)，加 0,1,0,0。
2. 每一个class挑选符(.someclass)、每一个特性挑选符(形如[attr=value]等)、每一个伪类(形如:hover等)加0,0,1,0。
3. 每一个元素或伪元素(:firstchild)等，加0,0,0,1。
4. 其它挑选符包含全局性挑选符*，加0,0,0,0。非常于没加，但是这也是1种specificity，后边会解释。

3、特点归类的挑选符目录

下列是1个按特点归类的挑选符的目录：

挑选符

特点值

h1 {color:blue;}

1

p em {color:purple;}

2

.apple {color:red;}

10

p.bright {color:yellow;}

11

p.bright em.dark {color:brown;}

22

#id316 {color:yellow}

100

单从上面这个表看来，貌似不大好了解，下面再得出1张表：

挑选符

特点值

h1 {color:blue;} 1 p em {color:purple;} 1+1=2 .apple {color:red;} 10 p.bright {color:yellow;} 1+10=11 p.bright em.dark {color:brown;} 1+10+1+10=22 #id316 {color:yellow} 100

根据上面，便可以很简易的看出，HTML标识的权重是1,CLASS的权重是10,ID的权重是100，承继的权重为0（后边会讲到）。

按这些标准将数据符串逐位相加，就获得最后的权重，随后在较为选择时依照从左到右的次序逐位较为。

优先选择级难题实际上便是1个矛盾处理的难题，当同1个元素（內容）被CSS挑选符选定时，就要依照优先选择级选择不一样的CSS标准，这在其中涉及到到的难题实际上许多。

说到这里，大家迫不得已说1下CSS的承继性。