CSS样式权重的级联cascade的概念

我们知道，firefox在众多浏览器中是对css 2高度兼容的一款浏览器，那是我能够编写一个中型b2b网站的时候（并不能说是我遇到过的难题）在禅意花园中看到的一个案例，说的是某个菜单在css中定义了以后只能在firefox中正常显示。因为那个css涉及的滤镜太多，而且还有css中"级联(cascade)"这种强大功能的支持。

那么级联样式表css中的"级联"到底是什么意思呢？W3C是这样来描述的：css级联为每个样式规则指派权重，若元素应用了多个样式规则，那么将优先使用权重最高的的样式。

听说搜索引擎对某个网站的赋予的权重比较高或比较低，但是css中的"级联"赋予的权重是什么呢？W3C的这段定义，看上去很富有深意，但是它只包含了两个信息传递给了我们，那就是---特殊性和继承性。这两个概念将会成为我们学习的良师益友。当然，凡事都是两面的，也有可能成为我们的噩梦！接下来我们就来着重来说一下这个级联能够对我们书写带来些什么！

级联概括了两个概念---特殊性和继承性，下面我们开始说一下这个继承性，继承性也就是你定义一个样式这个样式可以运用到它的子孙子元素，当然，不一定要都运用一个样式，也可以赋予几个选择器中的几个不同样式。我们线看下代码：

1

.box

2

{

3	/*定义了一个样式这个样式将会运用到里面元素的h1,h2,h3,h4,p,ul,li等子孙元素*/

4	color:red;

5

}

再来看段代码：

01

.box

02

{

03	/*box运用了一个样式，它的子孙要默认这个样式，这就是继承*/

04	color:red;

05

}

06	.box .archive

07

{

08	/*但是拥有.archive这个选择器的标签不老实，他不用老祖宗的东西，自己创造了个green的样式来，这样权重提高了，他就可以不用继承了*/

09	color:green;

10

}

这样的话大家大概能弄明白这个继承的含义了？如果我们每次都要定义一个样式，每个写一个选择器，累死人，不可想象有多大的工作量。

下面我们来看下这个特殊性有什么魅力。

前面我们已经来看到了两个例子，我们应该也能从中读到些什么吧，首先我们看到后面的规则比前面的权重高，比较特殊一点，尽管特殊性的例子看着比较简单，但是它本身存在的问题可不少。我们完全可能不经意的时候创造出了特殊过分了的样式规则，如果想要解决，我们需要想出更特殊的样式规则！在看代码（有代码有真相）：

01	body>html #head ul.navigation li.home a

02

{

03	/*本来这个就可以命令a的元素样式为红色，鼠标移动过也是一样，但我们想让它移动过去有变化怎么办？*/

04	color:red;

05

}

06	body>html #head ul.navigation li.home a:hover

07

{

08	/*ok这段代码解决了，这就是特殊中的特殊，来继承已经不能控制我了，哈哈*/

09	color:green;

10

}

控制特殊性：我们看到上面的是不是太特殊了？有点过分复杂？没关系，我们接下来再来个代码真相。

01	#linklist ul li h3

02

{

03	/*虽然标准，但是还是有些别扭*/

04	color:red;

05

}

06	#linklist h3

07

{

08	/*看我比较渐变吧，轻装上阵*/

09	color:red;

10

}

上面的例子表明了我们不能一层一层的来做无用功，有时候甚至对浏览器的解析也是一种负担。写了很多额外的选择器，却没有得到应有的评价。

从理论上来说，CSS规则的权重高低问题取决于CSS选择符优先级的的计算结果。CSS行内样式与各种选择符都可以采用某一个数值来表示：

• 行内样式(即直接在结构中给元素style属性）为：1000
• ID选择符为：0100
• 类选择符、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)：0010
• 类型选择符（即标签元素或伪元素）为：0001
• 其它选择符包括全局选择符*，加0000。相当于没加，不过这也是一种specificity

某一样式权重的最终确立取决于各选择器相加的结果，如：

view source

 

print?

1

选择符 特性值

2	h1 {color:blue;}     1

3	p em {color:purple;}     1+1=2

4	.apple {color:red;}  10

5	p.bright {color:yellow;} 1+10=11

6	p.bright em.dark {color:brown;}  1+10+1+10=22

7	#id316 {color:yellow}    100

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。因此形如body>html #head ul.navigation li.home a的选择器，要想实现子类继承其子类选择符权重值就不能低于其本身的权重值，同时这也加重了浏览器的负担，所以可以利用上面介绍的方法控制其特殊性。