首页 → 网页设计 → CSS教程 → 咖啡鱼版CSS教程十步学会CSS

咖啡鱼版CSS教程十步学会CSS

日期：2007-4-23 20:21:02 出处：咖啡鱼作者：咖啡鱼人气：

CSS教程系列六——继承、层叠和特殊性

CSS中有一些概念是需要深刻理解的，此节开始将介绍CSS中的一些非常重要的概念。

1.继承。

继承是一个非常容易理解的概念，我们可以形象的把它比作遗传，父元素的特性会继承给它的子元素。

body {color:red;}

<body>

<p>一些文字</p>

</body>

上面的代码我们没有定义P的颜色，但它包围的文字的颜色为红色，因为它继承了父元素body的颜色。

2.层叠和特殊性。

body {color:red;}

p {color:green;}

<body>

段落一

<p>段落二</p>

</body>

我们把第一个例子稍稍修改一下，现在的结果是段落一为红色，段落二为绿色。

有些人或许会有疑问，根据刚才介绍的继承，段落二是不是应该继承红色呢？

实际中，在CSS里，某个元素的某个属性，我们可能在不同的地方定义了多次，这样它的样式就会发生“层叠”，这时候浏览器会不会不知所措呢？究竟应该应用哪种样式呢？

CSS中以不同规则的“特殊性”来决定应该应用何种样式，特殊性高的规则优先，若两个规则特殊性相同，则后定义的规则优先。

另外，对于我们正在浏览的同一网页，可能会有多个样式表对其产生作用，一般有原网页作者的样式表，浏览的用户的样式表以及浏览器或用户代理使用的默认样式表。将样式标记上!important会提高它的重要度，可以优先于任何规则。

层叠的重要度次序：

特殊性的一般规律：行内样式，即用Style属性编写的规则特殊性最高，其次，具有ID选择器的规则比没有ID选择器的规则特殊，再次具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则特殊性相同，那么后定义的规则优先。

注意：继承的样式的特殊性为空，即直接应用于元素的任何样式一定会覆盖继承的样式，这就是为什么第二个例子中P的颜色没有继承Body颜色的原因。

3.特殊性的计算

除了上述的一般规律外，我们也可以计算出某个规则的特殊性。

上面我们一共算了三个数，假设ID选择器的数量为a，类和伪类的数量为b，类型选择器的数量为c。最后得到它的特殊性为：abc （并非三个值相加，而是按顺序排列）

例如，有这样一条规则：#wrapper #content .post p {color:red;}

这条规则中共有两个ID，一个类和一个类型选择器，则计算出的三个值为：2，1，1。将它们按顺序排列起来得到的数值是211。如果还有一条规则也定义了P的样式，但计算出的值小于211，那么第一条规则的特殊性就高。

咖啡鱼版CSS教程 十步学会CSS