这篇主要讨论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拥有同样的样式。