2.2.3  子選擇器

子選擇器與后代選擇器類(lèi)似，但其對(duì)何時(shí)應(yīng)用樣式有更多限制，其只選擇某一元素的直接子元素來(lái)應(yīng)用樣式。例如，下列代碼使用一個(gè)后代選擇器將一個(gè)段落中的粗體文本改為紅色，即使粗體文本本身在斜體標(biāo)記中(例如，<p><i><b>Hello</b> there</i></p>)：

p b { color:red; }

在這個(gè)例子中，單詞Hello顯示為紅色。不過(guò)，當(dāng)不需要這種較通用的行為時(shí)，子選擇器可用于縮小選擇器的范圍。例如，下列子選擇器僅當(dāng)元素是段落的直接子元素，而元素本身沒(méi)有包含在另一元素中時(shí)才把粗體文本設(shè)置為紅色。

p > b { color:red; }

現(xiàn)在，單詞Hello將不改變顏色，因?yàn)樗皇嵌温涞闹苯幼釉亍?/p>

2.2.4  ID選擇器

如果給元素指定一個(gè)ID名稱(例如，<div id='mydiv'>)，則可以直接以下列方式通過(guò)CSS訪問(wèn)它，將div中所有文本改為斜體：

#mydiv { font-style:italic; }

1. 重用ID

相同ID在文檔中只能使用一次，因此，只有第一次出現(xiàn)的ID對(duì)應(yīng)的元素會(huì)接受CSS規(guī)則指派的屬性值。但在CSS中，可直接引用任何同名的ID，只要它們出現(xiàn)在不同的元素類(lèi)型中，如下所示：

<div id='myid'>Hello</div>

<span id='myid'>Hello</span>

因?yàn)镮D通常只應(yīng)用于唯一元素，所以下列規(guī)則將下劃線只應(yīng)用于第一次出現(xiàn)的myid對(duì)應(yīng)的元素：

#myid { text-decoration:underline; }

不過(guò)，可確保CSS將規(guī)則應(yīng)用于具有同名ID的元素，如下所示：

span#myid { text-decoration:underline; }

div#myid { text-decoration:underline; }

或者，采用更簡(jiǎn)潔的形式(見(jiàn)稍后的2.2.8節(jié))：

span#myid, div#myid { text-decoration:underline; }

警告：

如果使用這種形式的選擇，應(yīng)記住，任何要訪問(wèn)這些元素的JavaScript無(wú)法很容易地這樣做，因?yàn)槌Ｓ玫膅etElementByID()函數(shù)將只返回第一次出現(xiàn)的ID對(duì)應(yīng)的元素。為了引用任何其他實(shí)例，編程人員必須搜索文檔中的整個(gè)元素列表，這是一個(gè)很繁重的任務(wù)。

2.2.5  類(lèi)選擇器

一次引用多個(gè)元素的更好方法是使用類(lèi)。如果想使頁(yè)面中許多元素共享一個(gè)樣式，可給它們指派相同的類(lèi)名(例如，<span class='myclass'>)，然后創(chuàng)建一條規(guī)則一次修改所有這些元素。如下規(guī)則所示，它使用該類(lèi)為所有元素創(chuàng)建一個(gè)10像素的左邊距偏移量：

.myclass { margin-left:10px; }

在現(xiàn)代瀏覽器中，HTML元素也可使用多個(gè)類(lèi)，方法是用空格將它們隔開(kāi)，如<span class='thisclass thatclass otherclass'>。這是本書(shū)使用的技術(shù)，用于給元素提供多個(gè)樣式。較老的瀏覽器只允許使用單個(gè)類(lèi)，因此，如果針對(duì)的是老式瀏覽器，應(yīng)將最重要的類(lèi)放在第一位。

1. 縮小類(lèi)范圍

通過(guò)指定應(yīng)用的元素類(lèi)型可縮小類(lèi)的作用范圍。例如，下列規(guī)則將設(shè)置只應(yīng)用于使用main類(lèi)的段落：

p.main { text-indent:30px; }

在這個(gè)例子中，只有使用main類(lèi)的段落(例如，<p class='main'>)才接受這個(gè)新的屬性值。其他試圖訪問(wèn)該類(lèi)(例如，<div class='main'>)的元素類(lèi)型將被忽略。