日期:2013-10-07  浏览次数:21495 次

---------------------------援用文字--------------------------------------
款式表中的特殊性描述了不同规则的绝对权重,它的基本规则是:

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。 中国教程网--团体空间;
统计选择符中的HTML标记名格式。

最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 留意,你需求将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表:

H1 {color:blue;} 特性值为:1
P EM {color:purple;} 特性值为:2
.apple {red;} 特性值为:10
P.bright {color:yellow;} 特性值为:11
P.bright EM.dark {color:brown;} 特性值为:22
#id316 {color:yellow} 特性值为:100

从上表我们可以看出#id316具有更高的特殊性,因此它有更高的权重。当有多个规则都能使用于同一个元素时,权重越高的款式将被优先采用。
-------------------------------------------------------------------------

可能不太好理解,按照上面的权重顺序,先统计ID,再统计CLASS,再统计HTML标记。即:

-------------------------------------------------------------------------
tH1 {color:blue;} 特性值为:1
P EM {color:purple;} 特性值为:1+1=2
.apple {red;} 特性值为:10
P.bright {color:yellow;} 特性值为:10+1=11
P.bright EM.dark {color:brown;} 特性值为:10+10+1+1=22
#id316 {color:yellow} 特性值为:100
-------------------------------------------------------------------------

可以看出,HTML标记的权重是1,CLASS的权重是10,ID的权重是100。在文章中还提到了承继的权重为0。

文章中提到一个小技巧:

---------------------------------援用文字---------------------------------
如果想让H1一直为黑色,而EM文字在其他情况下红色,那么下面的款式表设置就是一个很好的方法:

H1,H1 EM {color:black;} 特性值为:1,2
EM {color:red;} 特性值为:1

给定这个规则后,除在H1元素内的任何EM文字就都是红色,而H1内的EM文字仍旧为黑色,由于其选择符分组,在第一条规则中就有两条无效的规则(一条是对H1的,另一条是对H1 EM的)也就有两个特性值——每条规则一个。
-------------------------------------------------------------------------

这个技巧很有意思,HTML是这样的:

-------------------------------HTML--------------------------------------
<H1>黑色的H1<EM>黑色的EM</EM></H1>
<EM>红色的EM</EM>
-------------------------------------------------------------------------

也许你会说是不是跟上面的CSS款式顺序有关系呢?可以试试改成:

---------------------------------改后款式--------------------------------
EM {color:red;} 特性值为:1
H1,H1 EM {color:black;} 特性值为:1,2
-------------------------------------------------------------------------

效果还是一样的。这也解释了为什么“包含选择符(E1 E2)”的优先级比“类型选择符(E)”要高。

这一点对于在写款式时是很有协助的,比如我们可以在定义列表的时候用到:

-------------------------------------------------------------------------
ul{color:red;}
ul li{6jGuestul li{color:green;}
div ul{color:orange;}
div ul li{color:blue;}
-------------------------------------------------------------------------

这样就可以在不用添加像“id=XX”、“class=xxx”等属性的情况下对标签进行分别定义了