一、         CSS的语法结构

在将CSS应用到网页中，首先要做的就是选择合适的对象。这些对象可以是标签（如body、h1等）、类选择器、伪类选择器、特定的ID选择符（如#main表示<div id=”mian”>，即一个名称为main的ID对象）。

1．标签选择器

标签选择器是直接将HTML标签作为选择器，用来定义这些标签采用的CSS样式，其语法如图所示例如，p选择器就是用于声明页面中所有<p>标签的样式风格。例如下面这段代码：
CSS代码：
    p{
        color:red;
    font-size:18px;
}
以上代码声明了HTML页面中所有的<p>标签,文字的颜色都采用红色，大小都是18px。如果希望所有的<p>标签不再采用红色，而是蓝色，这时仅仅需要将属性color的值修改为blue，即可全部生效。

2．类选择器

使用标签选择器，可以让页面中所有的相应标签都会相应的产生变化。例如当声明了p标签样式时，页面中所有的<p>标签都将显示为红色。如果希望其中的某一个<p>标签显示时蓝色，这时仅靠标签选择器时不够的，还需要引入类选择器。它可以将同一类型HTML标签定义出不同样式，例如：
CSS代码：
    .red{
        color:red;
        font-size:18px;
    }
    .green{
        color:green;
        font-size:16px;
    }
HTML代码：
    <p class="red">类选择器1</p>
<p class="green">类选择器2</p>
</body>
其显示效果如图所示，可以看到2个<p>标签分别呈现出不同的颜色和字体大小。

3．ID选择符

ID选择器和类选择器的使用方法基本相同，不同之处在于ID选择器只能在页面中使用一次，因此其针对性更强。在HTML标签中只需要利用id属性，就可以直接调用CSS中的ID选择器。例如：
CSS代码：
#red {             /* ID选择符*/
    font-size: 18px;         /* 字体大小*/
    color: red;           /*文本颜色*/
}
#green {             /* ID选择符*/
    font-size: 16px;         /* 字体大小*/
    color: green;           /*文本颜色*/
}
HTML代码：
<p id="red">ID选择器1</p>
<p id="green">ID选择器2</p>
显示效果如图6-2所示，可以看到2行文字分别以所对应的ID选择器样式来显示。

4．复合选择器

上面3种是基本选择器，通过组合，还可以生成更多类型的选择器，实现更强、更方便的选择功能。复合选择器就是由两个或以上的基本选择器通过不同的连接方式构成。

（1）交集选择器

交集选择器是由两个选择器直接连接构成的，其结合的结果是选中二者各自元素范围的交集。但是要注意：第一个选集器必须是标签选择器，第二个选择器必须是类别选择器或者是ID选择器，且这两个选择器之间不能有空格，必须连续书写。例如：
CSS代码：
p{                    /*标签选择器*/
        color:red;
}
p.special{               /*标签﹒类别选择器*/
        color:blue;
     }
.special{             /*﹒类别选择器*/
        color:green;
     }
HTML代码：
<p>普通段落文本（红色） </p>
<p class="special">指定了.special 类别的段落文本（蓝色）</p>
<h4 class="special">指定了.special 类别的标题文本（绿色）</h4>
在上面的例子中<p>和<h4>都为标签选择器，.special为类别选择器，此外还定义了p.special，用于特殊控制，这个样式仅仅适用于<p class="special">标签，而不会影响使用了.special的其他标签，因此<h4>效果将不受此影响，显示的效果是h4和spcial的结合，也就是绿色加粗，显示效果如图所示。

（2）并集选择器

与交集选择器相对应的还有一种并集选择器，它的结果是同时选中各个基本选择器所选择的范围。与交集选择器不同的是，它可以是任何形式的选择器（包括标签选择器、类别选择器、ID选择器）都可以作为并集选择器的一部分，并集选择器是多个选择器通过逗号连接而成的。在声明各种css选择器时，如果某些选择器的风格完合相同或是部分相同，这时就可以利用并集选择器同时声明风格相同的css选择器。例如：
CSS代码：
h1, h2, h3, h4, h5 {                /*并集选择器*/
    color: blue;             /*文本颜色*/
}
HTML代码：
<h1>示例文本h1</h1>
<h2>示例文本h2</h2>
<h3>示例文本h3</h3>
<h4>示例文本h4</h4>
<h5>示例文本h5</h5>
显示效果如图所示，通过并集选择器同时对h1, h2, h3, h4, h5这五个标签声明相同的样式，所有的标题文本均显示蓝色。

（3）后代选择器

在CSS选择器中，还可以通过嵌套的方式对特殊位置的标签进行声明，当标签发生嵌套时，内层的标签就成为外层标签的后代。如：<p>这是外层的文本1<span>这是内层的文本</span>外层的文本2</p>，外层是<p>标签，内层是<span>标签，即<span>为<p>标签的后代。
后代选择器可以是各种选择器（标签选择器、类别选择器、ID选择器）进行嵌套。后代选择器的写法就是把外层的标签写在前面，内层的标签写在后面，之间用空格分隔。例如：
CSS代码：
p span {               /*后代选择器*/
    color: red;            /*文本颜色*/
    text-decoration: underline;    /*下划线*/
}
span {
    color: blue;              /*文本颜色*/
}
HTML代码：
<p>嵌套<span>使用css标签（红色下划线）</span>的方法</p>
<span>嵌套之外的标签不生效（蓝色）</span>
通过将<span>选择器嵌套在<p>选择器中进行声明，该效果只适用于<p>和</p>之间的<span>标签，，而对于其外的<span>标签并不产生任何效果，如图所示。
需要注意的是，后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”。例如，在上面的例子中我们追加HTML代码如下：<p>这是最外层文<span>本这是中间层文本<b>这是最里层文本</b></span></p>，如CSS设置如下：
p b {
    color: green;
}
如图所示，最里层的文本显示为绿色，说明里面的<b>标签被p b选择器选中了，这是因为<b>标签是</p>标签的“孙子元素”。