一、         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>標簽的“孫子元素”。