Web开发学习心得3——CSS的语法与层叠

 

这篇主要讨论CSS的语法及层叠的概念，有关CSS布局方面的内容下篇讨论。

如前两篇文章所述，CSS是专门用来负责文档的展现的，那既然如此，CSS就一定能够控制每种元素的展现，于是，就有了第一类语法——元素选择符。

元素选择符语法如下：

element

{

         样式规则

}

这个非常好理解，所谓元素选择符，就是说文档中所有该元素，都以该样式规则显示。

非常好，有了元素选择符，就能够很大程度上控制文档的展现了。然而，人们很快就碰到了新的问题：我有两个相同的元素，但是我希望两个元素以不同的样式展现。为了满足该要求，于是，就有了第二类语法——类选择符。

类选择符语法如下：

.class（注意class前面的小数点）

{

         样式规则

}

该选择符表示，所有属于该类的元素都以该样式规则展现。那么，什么叫属于该类，怎么样才属于该类呢？这就需要元素添加一个“class”属性，并将属性值指定为该类选择符名。

有了这些，就能指定文档中任何元素的样式了。然而，人们发现，文档中常常会包含某些唯一的区块，如页眉、页脚等，这些区块的样式常常只允许应用到该唯一的区块，虽然可以用类选择符来实现（给该区块一个不同于页面其他元素的唯一的类名），但是，如果有专门的语法来实现这种唯一，那无疑能使CSS更清晰。于是，就有了第三类语法——id选择符。

id选择符语法如下：

#id（注意id前面的#号）

{

         样式规则

}

该选择符表示，该id的元素以该样式规则展现。id选择符需要元素添加一个“id”属性，并给予唯一的名字作为属性值，即同一文档不允许有两个或以上的元素拥有相同的id值。

以上3种选择符，就构成了CSS最基本的语法。基于这3种选择符，又衍生出一些其他的规则，捡一些常见的简单说明如下：

“选择符1 选择符2”（注意空格分隔符）：表示选择符1下的所有子孙选择符2。如“p .red”表示元素选择符p的子孙中类名为red的所有元素。

“选择符1>选择符2”（注意大于号分隔符：表示选择符1下的所有儿子选择符2（注意只限于儿子）。如“p>.red”表示元素选择符p的儿子中类名为red的所有元素。

“选择符1类选择符2”（注意选择符之间紧挨）：表示选择符1中所有属于类选择符2的元素。如“p.red”表示<p>元素中属于red的所有元素。

“选择符1id选择符2”（注意选择符之间紧挨）：表示选择符1中id为选择符2的元素。如“p#red”表示<p>元素中id为red的元素。

另外，如果两个选择符的样式规则一样，可以简写为“选择符1，选择符2”（注意逗号分隔符），如“p，.red”表示元素选择符p与类选择符.red拥有同样的样式。

 

了解了CSS的规则之后，我们再来讲讲层叠的概念。

所谓层叠，就是指子孙元素继承祖先元素的样式属性的行为，大部分的属性都能继承，但也有部分属性不能继承，如padding，margin，float等。这个就不多说了，这里主要讲讲在一个元素的一个样式属性被多个选择符选择的时候，如何判断最终应用哪个属性值的问题。

《Head First HTML and CSS XHTML》中讲到一种方法是这样的：根据选择符计算出一个数字，数字最大的那个就是最终要应用的样式，如果存在多个相同的最大值，那么取位置最后面的那个。

那么怎么根据选择符来计算那个数字呢？方法如下：

如果选择符中包含元素选择符，那么就给那个数字加1，有几个元素选择符，就加几个1；

如果选择符中包含类选择符，那么就给那个数字加10，有几个类选择符，就加几个10；

如果选择符中包含id选择符，那么就给那个数字加100，有几个id选择符，就加几个100。

我们来举几个具体的例子：

p	.red	#header	p.red	p#header	p img	ul li p	#go p.red
001	010	100	011	101	002	003	111

注意，以逗号隔开的选择符并不能将其当作一个整体来计算，而要拆开分别计算。如p, .red，它相当于一个p（001）和一个.red（010），而不是整体011。

另外，10个元素选择符并不顶一个类选择符，10个类选择符也不顶一个id选择符，实际上，任意多个元素选择符都不顶一个类选择符，任务多个类选择符也不顶一个id选择符。以上规则可以用如下通俗的方式描述：首先比较id选择符的个数；其次比较类选择符的个数；再其次比较元素选择符的个数；最后，如果3者都相等，那么取靠后定义的那个。