除了指示網(wǎng)頁文檔元素的選擇器外，還有另外兩種類型的選擇器：類選擇器（class selector）和ID選擇器（ID selector），它們允許以一種獨立于文檔元素的方式來指定樣式。這些選擇器可以單獨使用，也可以與其他元素選擇器結(jié)合使用。不過，只有適當(dāng)?shù)貥?biāo)記文檔后才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構(gòu)想和計劃。

例如，假設(shè)你在制作一個網(wǎng)頁，討論钚的各種處理方法。這個網(wǎng)頁中對于如何安全地處理這樣一種危險物質(zhì)有很多警告。你希望這些警告以粗體文本出現(xiàn)，這樣就能突出顯示。不過，你并不知道這些警告具體是哪些元素。有些警告可能是整個段落，而另外一些可能只是一個長長的列表中的一項，或者只是一小段文本。所以，無法使用任何簡單選擇器來定義這樣一個規(guī)則。假設(shè)你想把規(guī)則寫作：

p {font-weight: bold;}

那么所有段落都會變成粗體，而不僅是那些包含警告的段落。你需要一種合適的方法，只選擇包含有警告的文本，或者更確切地講，需要一種方法只選擇作為警告的那些元素。該怎么做呢？這種情況下可以使用類選擇器，向文檔中已經(jīng)以某種方式標(biāo)記的部分應(yīng)用樣式，而不考慮具體涉及到哪些元素。

類選擇器

要應(yīng)用樣式而不考慮具體涉及的元素，最常用的方法就是使用類選擇器。不過，在使用類選擇器之前，需要修改具體的文檔標(biāo)記，以便類選擇器正常工作。輸入以下class屬性：

<p class="warning">When handling plutonium,care must be taken to avoid the formation of a critical mass.</p>

<p>With plutonium,<span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span> This can be accomplished by keeping the various masses separate.</p>

為了將一個類選擇器的樣式與元素關(guān)聯(lián)，必須將class屬性指定為一個適當(dāng)?shù)闹?。在前面的代碼中，有兩個元素的class值指定為warning:第一段（第一個p元素）以及第二段中的span元素。

現(xiàn)在所需要的僅是向這些歸類的元素應(yīng)用樣式的方法。對于HTML文檔，可以使用一種很簡潔的記法，即類名前有一個點號（.），而且可以結(jié)合一個簡單選擇器：

*warning {font-weight:bold;}

也就是說，font-weight: bold的網(wǎng)頁樣式會應(yīng)用到class屬性值為warning的所有元素（因為這里有一個通配選擇器）。

可以看到，類選擇器要正常工作，需要直接引用一個元素的class屬性中的值。這個引用前面往往有一個點號（.），標(biāo)記這是一個類選擇器。通過這個點號，可以幫助類選擇器與它可能結(jié)合的其他部分分隔開（如類選擇器可能結(jié)合了元素選擇器）。例如，你可能希望只在整個段落是警告時才顯示為粗體文本：

p.warning {font-weight: bold;}

選擇器現(xiàn)在會匹配class屬性包含warning的所有p元素，但是其他任何類型的元素都不匹配，不論是否有此class屬性。選擇器p.warning解釋為：“其class屬性包含詞warning的所有段落?！币驗閟pan元素不是一個段落，這個規(guī)則的選擇器與之不匹配，因此span元素不會變成粗體文本。

如果你確實希望為span元素指定不同的樣式，可以使用選擇器span.warning:

p.warning {font-weight: bold;}

span.warning {font-style: italic;}

在這種情況下，警告段落會變成粗體，而警告span會變成斜體。每個規(guī)則只應(yīng)用于某種特定類型的元素/類組合，所以不會影響其他元素。

另一種選擇是組合使用一個通用類選擇器和一個元素特定類選擇器，這樣可以得到更有用的樣式，如以下標(biāo)記所示：

.warning {font-style: italic;}

span.warning {font-weight: bold;}

在這種情況下，所有警告文本都會變成斜體，不過只有class為warning的span元素中的文本會變?yōu)榇中斌w。

注意前例中通用類選擇器的格式：這里只有一個類名，前面有一個點號而沒有任何元素名。如果你只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響。

多類選擇器

我們處理了class值中包含一個詞的情況。在網(wǎng)頁中，一個class值中有可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標(biāo)記為緊急（urgent）和警告（warning），就可以寫作：

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>

<p>With plutonium,<span class="warning">the possibility of implosion is very real, and must be avoided at all costs</span>. This can be acconplished by keeping the various masses separate.</p>

這兩個詞的順序無關(guān)緊要，寫成warning urgent也可以。

現(xiàn)在假設(shè)希望class為warning的所有元素都是粗體，而class為urgent的所有元素為斜體，class中同時包含warning和urgent的所有元素還有一個銀色的背景。就可以寫作：

.warning {font-weight: bold;}

.urgent {font-style: italic;}

.warning.urgent {background: silver;}

通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）?？梢钥吹剑W(wǎng)頁源代碼中包含class="urgent warning"，但CSS選擇器寫作.warning .urgent。不過，這個規(guī)則還是會導(dǎo)致“When handling plutonium ...”段落有一個銀色的背景。

如果一個多類選擇器包含類名列表（類名以空格分隔）中所沒有的一個類名，匹配就會失敗?？紤]以下規(guī)則：

p.warning.help {background: red;}

不出所料，這個選擇器將只匹配class包含詞warning和help的那些p元素。因此，如果一個P元素的class屬性中只有詞warning和urgent,將不能匹記。不過，它能匹配以下元素：

<p class="urgent warning help">Help me!</p>

警告：在IE7之前的版本中，不同平臺的Internet Explorer都不能正確地處理多類選擇器。對于這些較早的版本，盡管可以選擇列表中的一個類名，但是要根據(jù)列表中的多個類名進(jìn)行選擇時則無法工作。因此，P.waming可以正常工作，但p.warning.help會匹配class屬性中包含help的所有p元素，因為help在選擇器中最后出現(xiàn)。如果寫作p.help.warning,較老版本的Explorer就會匹配class值中包含warning的所有p元素，而不論其中是否出現(xiàn)help。

ID選擇器

在某些方面，ID選擇器類似于類選擇器，不過也有一些重要的差別。首先，ID選擇器前面有一個#號——也稱為棋盤號而不是點號。因此，可以看到如下的一個規(guī)則：

*#first-para {font-weight: bold;}

這個規(guī)則會讓id屬性中包含值first-para的所有元素顯示為粗體文本。

第二個區(qū)別是ID選擇器不引用class屬性的值，毫無疑問，它要引用id屬性中的值，以下是一個實標(biāo)ID選擇器的例子：

*#lead-para {font-weight:bold;}

<p id="lead-para">This paragraph will be boldfaced.</p>

<p>This paragraph will NOT be bold.</p>

注意可能對文檔中的任何元素指定了值lead-para。在這個特定情況下，規(guī)則將應(yīng)用到第一段，不過也可以同樣很容易地應(yīng)用到第二段或第三段。

與類選擇器一樣，ID選擇器中可以忽略通配選擇器。前面的例子也可以寫作：

#lead-para {font-weighc:bold;}

這個選擇器的效果將是一樣的。

類選擇器還是ID選擇器？

如前所述，可以為任意多個元素指定類，前例中類名warning被應(yīng)用到p和span元素，而且它還可以應(yīng)用到更多的元素。與此不同，在一個HTML文檔中，ID選擇器會使用一次，而且僅一次。因此，如果有一個元素的id值為lead-para,那么該文檔中所有其他元素的id值都不能是lead-para。

注意：實際中，瀏覽器通常并不檢查網(wǎng)頁中ID的唯一性，這意味著如果你在HTML文檔中設(shè)罝了多個有相同ID屬性值的元素，就可能為這些元素應(yīng)用相同的樣式。這種行為是不正確的，不過這種情況常會發(fā)生。如果一個文檔中有多個相同的ID值，還會導(dǎo)致編寫DOM腳本更為困難，因為像getElementByid( )之類的函數(shù)的前提是僅一個元素有給定的ID值。

不同于類選擇器，ID選擇器不能結(jié)合使用，因為ID屬性不允許有以空格分隔的詞列表。

從純語法意義上講，點號加類名的記法（如.warning）對XML文檔不一定能奏效。在寫這本書時，點號加類名的記法在HTML、SVG和MathML中能正常工作，也許將來的語言也支持，不過這要由各個語言的規(guī)范來決定。#號加ID的記法（如#Lead）可以在任何文檔語言中使用，只要其中有一個屬性在文檔中能保證唯一即可。唯一性可以用名為id的屬性來保證，或者可以是任何其他屬性，只要屬性的內(nèi)容在文檔中定義為唯一。

class名和id名之間的另一個區(qū)別是，如果你想確定應(yīng)當(dāng)向一個給定元素應(yīng)用哪些樣式，ID能包含更多含義。

類似于類，還可以獨立于元素來選擇ID。有些情況下，你知道文檔中會出現(xiàn)某個特定的ID值，但是并不知道它會出現(xiàn)在哪個元素上（就像處理钚的警告一樣），所以你想聲明獨立的ID選擇器。例如，你可能知道在一個給定的文檔中會有一個ID值為most important的元素。你不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節(jié)標(biāo)題。你只知道每個文檔中都會有這么一個最重要的內(nèi)容，它可能出現(xiàn)在任何元素中，而且只能出現(xiàn)一次。在這種情況下，可以編寫如下規(guī)則：

#mostImportant {color: red; background: yellow;}

這個規(guī)則會與以下各個元素匹配（前面已經(jīng)提到，這些元素不能在同一個文檔中同時出現(xiàn)，因為它們都有相同的ID值）：

<h1 id="mostImportant ">This is important!</h1>

<em id="mostImportant ">This is important!</em>

<ul id="mostlmportant">This is important!</ul>

還要注意，類選擇器和ID選擇器是區(qū)分大小寫的，這取決于網(wǎng)頁語言。HTML和XHTML將類和ID值定義為區(qū)分大小寫，所以類和ID值的大小寫必須與文檔中的相應(yīng)值匹配。因此，對于以下的CSS和HTML，元素不會變成粗體：

p.criticalInfo {font-weight:bold;}

<p class="criticalinfo">Don't look down.</p>

由于字母i的大小寫不同，所以選擇器不會匹配以上元素。

警告：一些較老的瀏覽器不區(qū)分類名和ID名的大小寫，但是寫這本書時，所有當(dāng)前的瀏覽器都要求區(qū)分大小寫。

屬性選擇器

對于類選擇器和ID選擇器，你所做的實際上只是選擇屬性值。前面兩小節(jié)中使用的語法是HTML、SVG和MathML文檔特定的（寫這本書時是如此），在其他標(biāo)記語言中，不能使用這些類和ID選擇器。為了解決這個問題，CSS2引人了屬性選擇器（attribute selector），它可以根據(jù)元素的屬性及屬性值來選擇元素。共有4種類型的屬性選擇器。

警告：Safari、Opera和所有基于Gecko的瀏覽器都支持屬性選擇器，不過在IE5/Mac和IE6/Win 之前，Internet Explorer并不支持屬性選擇器。IE7全面支持所有CSS2.1屬性選擇器，還支持一些CSS3屬性選擇器，這一節(jié)將討論這個內(nèi)容。

簡單屬性選擇

如果希望選擇有某個屬性的元素，而不論該屬性的值是什么，可以使用一個簡單屬性選擇器。例如，要選擇有class屬性（值不限）的所有h1元素，使其文本為銀色，可以寫作：

h1[class]{color: silver;}

所以，給定如下標(biāo)記：

<h1 class="hoopla">Hello</h1>

<h1 class="severe">Serenity</h1>

<h1 class="fancy">Foo1ing</h1>

這個策略在XML文檔中相當(dāng)有用，因為XML語言主張要針對元素和屬性的用途指定元素名和屬性名?？紤]描述太陽系行星的一個XML語言（我們稱之為PlanetML）。如果你想選擇有moons屬性的所有planet元素，使之顯示為粗體，以便能更關(guān)注有moons的行星，就可以寫作：

planet[moons]{font-weight: bold;}

這會讓以下標(biāo)記片段中第二個和第三個元素的文本顯示為粗體，但第一個元素的文本不是粗體：

<planet>Venus</planet>

<planet moons="1">Earth</planet>

<planet moons="2">Mars</planet>

在網(wǎng)頁文檔中，可以采用一些創(chuàng)造性的方法使用這個特性。例如，可以對所有帶有alt屬性的圖像應(yīng)用某種樣式，從而突出顯示這些有效的圖像：

img[alt](border: 3px solid red;}

（這個特例更適合用來診斷而不是設(shè)計，即用來確定圖像是否確實有效。）

如果你想把包含標(biāo)題（title）信息的所有元素變?yōu)榇煮w顯示（光標(biāo)停留在這些元素上時大多數(shù)瀏覽器都會將其顯示為“工具提示”），就可以寫作：

*[title]{font-weight: bold;}

類似地，可以只對有href屬性的錨（a元素）應(yīng)用樣式。

還可以根據(jù)多個屬性進(jìn)行選擇，只需將屬性選擇器鏈接在一起即可。例如，為了將同時有href和title屬性的網(wǎng)頁超鏈接的文本置為粗體，可以寫作：

a[href][title]{font-weight: bold;}

這會將以下標(biāo)記中的第一個鏈接變成粗體，但第二個和第三個鏈接不變：

<a hre￡="htcp://ww.w3.org/" title="W3C Home">W3C</a><br />

<a href ="http://www.webstandards.org">Standards Info</a><br />

<a title="Not a link">dead letter</a>

根據(jù)具體屬性值選擇

除了選擇有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍，只選擇有特定屬性值的元素。例如，假設(shè)想將指向網(wǎng)站上某個特定文檔的超鏈接變成粗體，可以寫作：

a[href="http:www.css-discuss.org/about.html"]{font-weight: bold;}

可以為任何元素指定屬性和值組合。不過，如果文檔中沒有出現(xiàn)該組合，選擇器將無法匹配。同樣地，XML語言也可以利用這種方法來設(shè)置樣式。下面再回到我們的PlanetML例子。假設(shè)只想選擇moons屬性值為1的那些planet元素：

planet[moons="1"]{font-weight: bold;}

這會把以下標(biāo)記片段中第二個元素的文本變成粗體，但第一個和第三個元素不受影響：

<planet>Venus</planet>

<planet moons="1">Eareh</planet>

<planet moons="2">Mars</planet>

與屬性選擇類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。例如，為了將href值為http://www.w3.org/而且title屬性值為W3C Home的所有HTML超鏈接的文本大小加倍，可以寫作：

a[href="http://www.w3.org/"][title="W3C Home"]{font-size: 200%;}

這會把以下標(biāo)記中第一個鏈接的文本大小加倍，但第二個或第三個鏈接不受影響：

<a href="http://www.w3 .org/" title="W3C Home">W3C</a><br />

<a href="http://www.webstandards.org" title="Web Standards Organization">Standards Info</a><br />

<a href="http://www.example.org/" title="W3C Home">dead.link</a>

注意，這種格式要求必須與屬性值完全匹配。如果遇到的值本身包含一個用空格分隔的值列表（如HTML屬性class），匹配就會出問題。例如。考慮以下標(biāo)記片段：

<planet type="barren rocky">Mercury</planet>

要根據(jù)具體屬性值匹配這個元素，唯一的辦法就是寫作：

planet[type="barren rocky"]{font-weight:bold;}

如果寫成planet[type="barren"]，這個規(guī)則不能匹配示例標(biāo)記，因而會失敗。HTML中的class屬性也是如此?？紤]以下片段：

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>

要根據(jù)具體屬性值來選擇這個元素，必須寫作：

p[class="urgent warning"]{font-weight: bold;}

這不同于先前介紹的點號類名記法，有關(guān)內(nèi)容將在下一節(jié)討論。相反，這個規(guī)則會選擇class屬性值為urgent warning的所有p元素，要求屬性值中urgent在前warning 在后，而且有一個空格將其分隔，這實際上就是一個完全串匹配。

另外，要注意ID選擇器與指定id屬性的屬性選擇器不是一回事。換句話說，h1#page-title和h1[id="page-title"]之間存在著微妙但很重要的差別。

根據(jù)部分屬性值選擇

如果屬性能接受詞列表（詞之間用空格分隔），可以根據(jù)其中的任意一個詞進(jìn)行選擇。在HTML中，這方面最經(jīng)典的例子就是class屬性，它能接受一個或多個詞作為其屬性值。以下是我們經(jīng)常使用的示例文本：

<p class="urgent warning">When handling plutonium, care must be taken to avoid the formation of a critical mass.</p>

假設(shè)你想選擇class屬性中包含warning的元素，可以用一個屬性選擇器做到這一點：

p[class~="warning"]{font-weight:bold;}

注意選擇器中出現(xiàn)了一個波浪號（~）。這正是部分選擇的關(guān)鍵，即根據(jù)屬性值中出現(xiàn)的一個用空格分隔的詞來完成選擇。如果忽略了這個波浪號，如上一節(jié)所述，則說明需要完成完全值匹配。這個選擇器構(gòu)造等價于先前討論的點號類名記法。因此，p.warning和p[class~="warning"]應(yīng)用到HTML文檔時是等價的。以下是一個例子，這是前面“PlanetML”標(biāo)記的網(wǎng)頁版本：

<span class="barren rocky">Mercury</planet>

<span class="cloudy barren">Venus</planet>

<span class="life-bearing cloudy">Earth</planet>

為了把class屬性中有barren的所有元素變?yōu)樾斌w，可以寫作：

span[class~="barren"]{font-style: italic;}

這個規(guī)則的選擇器會匹配示例標(biāo)記中的前兩個元素，因此這兩個元素的文本將變成斜體。寫作span.barren {font-style:italic;}也能得到同樣的結(jié)果。

那么HTML中為什么還要有這種“~=”屬性選擇器呢？因為它能用于任何屬性，而不只是class。例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基于title文本的部分值屬性選擇器，只選擇這些圖片。

img[title~="Figure"]{border: 1px solid gray;}

這個規(guī)則會選擇title文本包含F(xiàn)igure的所有圖像。因此，只要圖片有諸如“Figure 4. A bald-headed elder statesman"之類的title文本，就能與這個規(guī)則匹配。由于這個原因，選擇器img[title~="Figure"]還會匹配值為“How To Figure Out Who's In Charge”的title屬性。沒有title屬性的圖像或者title值中不包含“Figure”的圖像都不會匹配。

還有一個更高級的CSS選擇器模塊，這是在CSS2完成之后發(fā)布的，其中包含更多的部分值屬性選擇器（或者按規(guī)范的說法，稱之為“子串匹配屬性選擇器”）。由于這些屬性選擇器在很多現(xiàn)代瀏覽器中都得到了支持，包括IE7。

后代選擇器

理解這個結(jié)構(gòu)模型后，第一個好處是可以定義后代選擇器（descendant selector,也稱為包含選擇器）或上下文選擇器（contextual selector）。定義后代選擇器就是來創(chuàng)建一些規(guī)則，它們僅在某些結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。舉例來說，假設(shè)你希望只對從h1元素繼承的那些em元素應(yīng)用樣式。可以在h1中找到的每個em元素上放一個class屬性，但是這就像使用font標(biāo)記一樣費功夫。顯然，更高效的做法是聲明一些規(guī)則，只與h1元素中包含的em元素匹配。

為此，可以寫作：

h1 em {color: gray;}

這個規(guī)則會把作為h1元素后代的em元素的文本變成灰色。其他em文本（如段落或塊引用中的em）則不會被這個規(guī)則選中。

在一個后代選擇器中，規(guī)則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結(jié)合符（combinator）。每個空格結(jié)合符可以解釋為“……在……中找到”，“……作為……的一部分”，或“……作為……的后代”，但是要求必須從右向左讀選擇器。因此，h1 em可以解釋為“作為h1元素后代的任何em元素”（譯注1）[1]。（如果要從左向右讀選擇器，可以換成以下說法：“包含一個em的所有h1會把以下樣式應(yīng)用到該em”）

當(dāng)然并不僅限于兩個選擇器，例如：

在這種情況下，會把一個無序列表中的強(qiáng)調(diào)文本置為灰色，這個無序列表是一個有序列表的一部分，而這個有序列表本身又是另一個無序列表的一部分（盡管很復(fù)雜，不過這確實沒有錯）。顯然這是一個很特定的選擇原則。

后代選擇器功能極其強(qiáng)大。有了這些后代選擇器，使得網(wǎng)頁中不可能實現(xiàn)的任務(wù)（至少是如果不大量使用font標(biāo)記就無法做到的事情）成為可能。假設(shè)有一個文檔，其中有一個邊欄，還有一個主區(qū)。邊欄的背景為藍(lán)色，主區(qū)背景為白色，這兩個區(qū)都包含鏈接列表。

不能把所有這些鏈接都設(shè)置為藍(lán)色，因為這樣一來邊欄中的藍(lán)色鏈接將無法看到。

解決方法是使用后代選擇器。在這種情況下，可以為包含邊欄的表單元格指定一個值為sidebar的class屬性，并把主區(qū)的class屬性值設(shè)置為main。然后編寫以下樣式：

td.sidebar {background: blue;}

td.main {background: white;}

td.sidebar a:link {color: white;}

td.main a:link {color: blue;}

注意:link指示尚未訪問的資源的鏈接。

下面是另一個例子：假設(shè)你希望blockquote中包含的所有b（粗體）元素的文本顏色為灰色，另外正常段落中的所有粗體文本也為灰色：

blockquote b, p b {color: gray;}

其結(jié)果是，作為段落或塊引用后代的b元素中的文本會變成灰色。

關(guān)于后代選擇器有一個常被忽視的方面，即兩個元素之間的層次間隔可以是無限的。例如，如果寫作ul em,這種語法就會選擇從ul元素繼承的所有em元素，而不論em的嵌套層次多深。因此，ul em將會選擇以下標(biāo)記中的em元素：

<ol>

<li>List item 1

<li>List item 1-1</li>

<li>List item 1-2</li>

<li>List item 1-3

<ol>

<li>List item 1-3-1</li>

<li>List item <em>l-3-2</em></li>

<li>List item l-3-3</li>

</ol></li>

<li>List item 1-4</li>

</ol></li>

</ul>

選擇網(wǎng)頁中的子元素

在某些情況下，可能并不想選擇一個任意的后代元素：而是希望縮小范圍，只選擇另一個元素的子元素。例如，你可能想選擇只作為一個h1元素子元素（而不是后代元素）的 strong元素。為此，可以使用子結(jié)合符，即大于號（>）:

h1>strong {color: red;}

這個規(guī)則會把第一個h1下面出現(xiàn)的strong元素變成紅色，但是第二個出現(xiàn)的strong 元素不受影響。

<h1>This is <strong>very</strong> important.</<h1>

<h1>This is <em>really <strong>very</strong></em> important.<h1>

如果從右向左讀（譯注2）[2]，選擇器h1 > strong可以解釋為“選擇作為h1元素子元素的所有strong元素”。子結(jié)合符兩邊可以有空白符，這是可選的。因此，h1 > strong,h1> strong和 h1>strong都是一樣的，只要你愿意，可以使用空白符，也可以忽略空白符，

查看文檔的樹結(jié)構(gòu)時，可以很容易地看到，子選擇器限制為只匹配樹中直接相連的元素。

在這個樹片段中，可以很容易地看出父子關(guān)系。例如，a元素是strong元素的父元素，但是它又是p元素的子元素?？梢杂胮> a和 a>strong選擇器來匹配這個片段中的元素，但是p> strong不行，因為strong是p的后代而不是其子元素。

還可以在同一個選擇器中結(jié)合使用后代選擇器和子選擇器。因此，table.suitimary td > P會選擇作為一個td元素子元素的所有p元素，這個td元素本身從table元素繼承，該table元素有一個包含summary的class屬性。

選擇相鄰兄弟元素

假設(shè)你希望對一個標(biāo)題后緊接著的段落應(yīng)用樣式，或者向一個段落后緊接著的列表指定特殊的外邊距。要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟結(jié)合符（adjacentsibling combinator），這表示為一個加號（+）。與子結(jié)合符一樣，相鄰兄弟結(jié)合符旁邊可以有空白符，這要看創(chuàng)作人員的喜好。

要去除緊接在一個h1元素后出現(xiàn)的段落的上邊距，可以寫作：

h1 + p {margin-top: 0;}這個選擇器讀作“選擇緊接在一個h1元素后出現(xiàn)的所有段落。h1要與p元素有共同的父元素”。

為了形象地展示這個選擇器是如何工作的，最容易的辦法是再來考慮一個文檔樹的片段。

在這個片段中，div元素中包含兩個列表，一個是有序列表，另一個是無序列表，每個列表都包含三個列表項。這兩個列表是相鄰兄弟，列表項本身也是相鄰兄弟。不過，第一個列表中的列表項不是第二個列表中列表項的兄弟，因為這兩組列表項的父元素不同（最多只能算堂兄弟）。

要記住，用一個結(jié)合符只能選擇兩個相鄰兄弟中的第二個元素。因此，如果寫作li+li {font-weight: bold;}，只會把各列表中的第二個和第三個列表項變成粗體。第一個列表項將不受影響。

要想網(wǎng)頁正常地工作，CSS要求兩個元素按“源順序”出現(xiàn)。在前面的例子中，ol元素后面有一個ul元素。因此可以用ol+ul選擇第二個元素，但是用這個語法無法選擇第一個元素。要想與ul+ol匹配有序列表必須緊跟在無序列表后面。

另外，兩個元素之間的文本內(nèi)容不會影響相鄰兄弟結(jié)合符起作用?？紤]以下標(biāo)記片段，其樹視圖與圖2-19相同：

<div>

<ol>

<li>List item 1</li>

<li>List item 1</li>

<li>List item 1</li>

</ol> This is some text that is part of the 'div'.

<ul>

<li>A list item</li>

<li>Another list item</li>

<li>Yet another list item</li>

</ul>

</div>

盡管兩個列表間多了一行文本，不過還是可以用選擇器ol+ul來匹配第二個列表。這是因為，中間的文本并不包含在兄弟元素中，而只是父元素div的一部分。如果將這個文

l+p + ul。

如以下示例所示，相鄰兄弟結(jié)合符還可以結(jié)合其他結(jié)合符：

html > body table + ul{margin-top: 1.5em;}

這個選擇器解釋為“選擇緊接在一個table元素后出現(xiàn)的所有兄弟ul元素，該table 元素包含在一個body元素中，body元素本身是html元素的子元素”。

警告：Windows平臺的Internet Explorer在IE6之前不支持子選擇器和相鄰兄弟選擇器。IE7對二者則提供了支持。