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

1、類別選擇器

類選擇器根據(jù)類名來選擇

前面以”.”來標(biāo)志，如：

.demoDiv{

color:#FF0000;

}

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

如：

<div class="demoDiv">

這個(gè)區(qū)域字體顏色為紅色

</div>

同時(shí)，我們可以再定義一個(gè)元素：

<p class="demoDiv">

這個(gè)段落字體顏色為紅色

</p>

最后，用瀏覽器瀏覽，我們可以發(fā)現(xiàn)所有class為demoDiv的元素都應(yīng)用了這個(gè)樣式。包括了頁面中的div元素和p元素。

上例我們給兩個(gè)元素都定義了class，但如果有很多個(gè)元素都會(huì)應(yīng)用這個(gè)元素，那得一個(gè)個(gè)的定義元素，就會(huì)造成頁面重復(fù)的代碼太多，這種現(xiàn)象稱為“多類癥”。

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

<div class="demoDiv">

<div>

這個(gè)區(qū)域字體顏色為紅色

</div>

同時(shí)，我們可以再定義一個(gè)元素：

<p>

這個(gè)段落字體顏色為紅色

</p>

</div>

這樣，我們就只是定義了一個(gè)類，同時(shí)把樣式應(yīng)用到了所有的元素當(dāng)中。

2、元素選擇器

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

用法十分簡單，例如：

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

1 html {background-color: black;}

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

3 h2 {background-color: red;}

此外，我們也可以同時(shí)對(duì)多個(gè)html元素進(jìn)行聲明。例如：

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

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

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

3、ID選擇器

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

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

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

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

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

使用ID選擇器的方法為井號(hào)”#”后面跟id值。現(xiàn)在我們使用id選擇器選擇以上2個(gè)p元素如下：

1 #top-para {}

2 #foot-para {}

這樣我們就可以對(duì)以上2個(gè)段落進(jìn)行需要的操作了。正因?yàn)镮D選擇器的唯一性，也使其用法變得相對(duì)簡單。

4、屬性選擇器

您可以用判斷html標(biāo)簽的某個(gè)屬性是否存在的方法來定義css

屬性選擇器，是根據(jù)元素的屬性來匹配的，其屬性可以是標(biāo)準(zhǔn)屬性也可以是自定義屬性；!ie6，0 0 1 0

　　當(dāng)然，也可以同時(shí)匹配多個(gè)屬性；

[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結(jié)尾的所有元素

[attr*=val]

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

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

[attr~=val]

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

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

[attr|=val]

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

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

5、派生選擇器

派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結(jié)構(gòu)來進(jìn)行css選擇的。DOM結(jié)構(gòu)在此不再贅述了

比方說，如果想要選擇body元素的所有l(wèi)i子元素，方法如下：

1 body li { ...}

這里會(huì)選擇所有的li后代，也就是body下的所有l(wèi)i，不論他們之間相隔的代數(shù)有多少。

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

1 h1 span { ...}

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

1 .warning li { ...}

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

1 div.warning li { ...}

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

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