强烈推荐:非常不错的样式表CSS教程(4)

●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

第 1 2 页

强烈推荐:非常不错的样式表CSS教程(4)

相关文章:

你感兴趣的文章:

标签云: