●Specificity

本节讲述的是用来判断样式优先权的是“specificity”。“specificity”和选择符selector中元素的数目以及元素的属性有关，“specificity”高的优先应用。

怎样计算选择符的“specificity”值呢？涉及到三项内容：

1.选择符中ID标识符属性的数目A

注意:一个匹配ID的属性选择符不能算作一个ID,它仅能当作一个属性选择符.例如"id = value"的specificity值远远小于"#_value"

2.选择符中其它属性、伪类的数目B

注意:Class类选择符是属性选择符的一种.

3.选择符中标识、伪元素的数目C

例外:如果样式规则内嵌到一个式样属性内,它并不具备selector、此时它的specificity要比其它任何selector都高.

这三个值通过逗号“连”在一起构成一个加权值。举例如下：

List A B C Specificity #blurb { ...} 1 1 0 1，0，0 .message.big { ... } 0 1 1 0，1，1 div.message { ... } 0 1 1 0，1，1 .message { ... } 0 1 0 0，1，0 div { ... } 0 0 1 0，0，1 * { ... } 0 0 0 0，0，0 #id1 { ... } 1 0 0 1，0，0 UL UL LI.red { ... } 0 1 3 0，1，3 LI.red { ... } 0 1 1 0，1，1 LI { ... } 0 0 1 0，0，1 #z { ... } 1 0 0 1，0，0 UL LI { ... } 0 0 2 0，0，2 UL OL+LI { ... } 0 0 3 0，0，3 H1 + *[REL=up]{ ... } 0 1 1 0，1，1 UL OL LI.red { ... } 0 1 3 0，1，3 LI.red.level { ... } 0 2 1 0，2，1 #x34y { ... } 1 0 0 1，0，0 H1 {(simple selector)} 0 0 1 0，0，1 P EM {(contextual selector)} 0 0 2 0，0，2 .grape {(class selector)} 0 1 0 0，1，0 P.bright {(element/class selector combo)} 0 1 1 0，1，1 P.bright EM.dark {(contextual element/class)} 0 2 2 0，2，2 #greg {(ID selector)} 1 0 0 1，0，0 *{ ... } 0 0 0 0，0，0 li{ ... } 0 0 1 0，0，1 ul li{ ... } 0 0 2 0，0，2 ul ol+li{ ... } 0 0 3 0，0，3 [id=value] { ... } 0 1 0 0，1，0 h1 + *[rel=up] { ... } 0 1 1 0，1，1 ul ol li.class { ... } 0 1 3 0，1，3 li.c1.c2 { ... } 0 2 1 0，2，1 #value{ ... } 1 0 0 1，0，0 DIV.a DIV.b DIV.c DIV.d DIV.e DIV.f DIV.g DIV.h DIV.i DIV.j DIV.k { color: red; } 0 11 11 0，b，b

注：ID总是优先于属性,属性总是优先于标记名。所以一个具有ID标识符的selector总是优先于其它类定义的样式。

●顺序：后来者居上

最后一节讲按照次序决定优先顺序，末尾的规则定义超过任何前面的定义，假设两个规则：

p { color: red; background: yellow }
p { color: green }

段落显示绿色文字，同时背景色为黄色，因为规则一设置的颜色将被规则二取代，而背景色不存在样式冲突，所以规则一中定义的背景色仍然被采用，

★★临时测验：

看一下下列代码：

p.red { color: red }
p.green { color: green }
p.blue { color: blue }

...

<p class="red green blue">Sample text.</p>
<p class="green blue red">Sample text.</p>
<p class="blue red green">Sample text.</p>

频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者 文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意。 原始作者:佚名 录入时间:2007-6-20 17:11:47 信息来源:不详 投稿信箱:itqoo@126.com