每一條CSS樣式定義由兩部分組成，形式如下：[code] 選擇器{樣式} [/code] 在{}之前的部分就是“選擇器”。“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。本文我們一起來看看常用的5大CSS選擇器。

1、類別選擇器

類選擇器根據類名來選擇

前面以”.”來標志，如：

.demoDiv{

color:#FF0000;

}

在HTML中，元素可以定義一個class的屬性。

如：

<div class="demoDiv">

這個區域字體顏色為紅色

</div>

同時，我們可以再定義一個元素：

<p class="demoDiv">

這個段落字體顏色為紅色

</p>

最后，用瀏覽器瀏覽，我們可以發現所有class為demoDiv的元素都應用了這個樣式。包括了頁面中的div元素和p元素。

上例我們給兩個元素都定義了class，但如果有很多個元素都會應用這個元素，那得一個個的定義元素，就會造成頁面重復的代碼太多，這種現象稱為“多類癥”。

我們可以改成這樣來定義。

<div class="demoDiv">

<div>

這個區域字體顏色為紅色

</div>

同時，我們可以再定義一個元素：

<p>

這個段落字體顏色為紅色

</p>

</div>

這樣，我們就只是定義了一個類，同時把樣式應用到了所有的元素當中。

2、元素選擇器

最常見的css選擇器當屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,div乃至html。

用法十分簡單，例如：

以下css代碼會對整個文檔添加黑色背景；將所有p元素字體大小設置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。

1 html {background-color: black;}

2 p {font-size: 30px; backgroud-color: gray;}

3 h2 {background-color: red;}

此外，我們也可以同時對多個html元素進行聲明。例如：

以下css代碼會對文檔中所有的h1~h6以及p元素字體設置為”黑體”。

1 h1, h2, h3, h4, h5, h6, p {font-family: 黑體;}

通過上面的例子也可以看出css的基本規則結構：由選擇器和聲明塊組成，每個聲明塊中包含一個或多個聲明。其語法格式為：選擇器{屬性名:屬性值;}

3、ID選擇器

ID選擇器和類選擇器有些類似，但是差別又十分顯著。

首先一個元素不能像類屬性一樣擁有多個類，一個元素只能擁有一個唯一的ID屬性。其次一個ID值在一個HTML文檔中只能出現一次，也就是一個ID只能唯一標識一個元素(不是一類元素，而是一個元素)。

類似類屬性，在使用ID選擇器前首先要在元素中添加ID屬性，例如：

1 1 <p id="top-para">...</p>

2 2 <p id="foot-para">...</p>

使用ID選擇器的方法為井號”#”后面跟id值。現在我們使用id選擇器選擇以上2個p元素如下：

1 #top-para {}

2 #foot-para {}

這樣我們就可以對以上2個段落進行需要的操作了。正因為ID選擇器的唯一性，也使其用法變得相對簡單。

4、屬性選擇器

您可以用判斷html標簽的某個屬性是否存在的方法來定義css

屬性選擇器，是根據元素的屬性來匹配的，其屬性可以是標準屬性也可以是自定義屬性；!ie6，0 0 1 0

　　當然，也可以同時匹配多個屬性；

[attr]

[title] {margin-left: 10px}

//選擇具有 title 屬性的所有元素；

[attr=val]

[title = 'this'] {margin-right: 10px}

//選擇屬性 title 的值等于 this 的所有元素

[attr^=val]

[title ^= 'this'] {margin-left: 15px}

//選擇屬性title的值以this開頭的所有元素

[attr$=val]

[title $= 'this'] {margin-right: 15px}

//選擇屬性title的值以this結尾的所有元素

[attr*=val]

[title *= 'this'] {margin: 10px}

//選擇屬性title 的值包含 this 的所有元素

[attr~=val]

[title ~= 'this'] {margin-top: 10px}

//選擇屬性 title 的值包含一個以空格分隔的詞為 this 的所有元素，即 title 的值里必須要有 this 這個單詞并且this要與其他單詞之間有空格分隔

[attr|=val]

[title |= 'this'] {margin-bottom: 10px}

//選擇屬性 title 的值等于this，或值以 this- 開頭的所有元素

5、派生選擇器

派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結構來進行css選擇的。DOM結構在此不再贅述了

比方說，如果想要選擇body元素的所有li子元素，方法如下：

1 body li { ...}

這里會選擇所有的li后代，也就是body下的所有li，不論他們之間相隔的代數有多少。

同理，如果想要選擇h1元素下的span，可以使用以下代碼：

1 h1 span { ...}

如果我們要選擇擁有warning類的元素的li后代，可以使用下面的方法：

1 .warning li { ...}

當然，如果希望只選擇擁有warning類的div元素的li后代，可以寫作：

1 div.warning li { ...}

由上面的例子不難看出，后代選擇器的規則就是用空格連接2個或多個選擇器。空格的含義為：…的后代。

當然，除了上述的5大CSS選擇器，還有很多我們不怎么熟悉的CSS選擇器，它們都有各自的特色和功能，共同實現CSS對HTML頁面中元素的控制。想了解這些CSS選擇器的更多信息，請觀看本站的HTML教程。