這個(gè)選擇器的正式名稱(chēng)(根據(jù)W3C)是臨近同屬組合器。我覺(jué)得這個(gè)名稱(chēng)既長(zhǎng)又復(fù)雜，因此把它簡(jiǎn)稱(chēng)為相鄰選擇器。雖說(shuō)是"相鄰"，但相鄰選擇器選取的卻是一個(gè)元素的下一個(gè)元素。基于圖3-14中的標(biāo)記，圖3-24中的標(biāo)記示范了相鄰選擇器的形式。
注意：
IE 6本身并不支持相鄰選擇器；請(qǐng)查閱本書(shū)的網(wǎng)址www.wrox.com/go/beginning_css2e以獲取兼容性方面的幫助。
 |
| 圖 3-24 |
在圖3-24中，可以看到加號(hào)被用來(lái)表示兩個(gè)元素之間的相鄰關(guān)系。你在這點(diǎn)上也許會(huì)有疑問(wèn)：這么做看起來(lái)很舒服，但實(shí)際用途是什么？難道不能單獨(dú)引用div#body來(lái)達(dá)到同樣的效果嗎？為什么需要一個(gè)相鄰選擇器？很高興你這樣問(wèn)。在特定的情況下這個(gè)選擇器會(huì)發(fā)揮作用，比如當(dāng)幾份HTML文檔引用同一份樣式表時(shí)。在一部分文檔中，帶有id名稱(chēng)heading的<div>元素和帶有id名稱(chēng)body的<div>元素是相鄰的，即它們?cè)谠次募邢嗬^出現(xiàn)。在其他文檔中這兩個(gè)元素或許不是相鄰的。如果你對(duì)這兩種理論上不同的文檔有不同的模板需求的話，自然會(huì)想通過(guò)某種方法來(lái)引用那些相鄰的元素，這就是相鄰選擇器實(shí)際應(yīng)用的一個(gè)例子。正如我在上一節(jié)"直接子選擇器"中提到的那樣，有時(shí)你不想創(chuàng)建新的id和類(lèi)名。在某些情況下，當(dāng)你使用相鄰選擇器時(shí)，能夠避免創(chuàng)建新的類(lèi)和id名稱(chēng)。
在接下來(lái)的概念驗(yàn)證型例子中，你將親自試驗(yàn)相鄰選擇器。
試一試 相鄰選擇器
例3-5 按以下步驟，了解相鄰選擇器是如何工作的。
1. 在文本編輯器中輸入以下標(biāo)記：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Next Sibling Selectors</title>
<link rel='stylesheet' type='text/css' href='Example_3-5.css' />
</head>
<body>
<h1>Next Sibling Selectors</h1>
<p>
The next sibling selector (or adjacent sibling combinator as
it's officially called) allows you to select an element based on
its sibling. This paragraph has a lightyellow background and
darkkhaki text.
</p>
<p>
This paragraph has a yellowgreen background and green text.
</p>
<p>
This paragraph has no colored background, border, or text.
</p>
</body>
</html>
|
2. 保存上述標(biāo)記為Example_3-5.html。
3. 在文本編輯器中輸入以下CSS：
body {
font: 12px sans-serif;
}
p {
padding: 5px;
}
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
|
4.保存樣式表為Example_3-5.css。將它在支持相鄰選擇器的瀏覽器中載入，你將看到如圖3-25所示的結(jié)果。
 |
| （點(diǎn)擊查看大圖）圖 3-25 |
工作原理
相鄰選擇器基于相鄰關(guān)系應(yīng)用樣式。下面是對(duì)Example_3-5.css中有關(guān)樣式的分析。
Example_3-5.css中的第一個(gè)樣式應(yīng)用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素，則應(yīng)用本規(guī)則中的聲明。
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
|
只有當(dāng)<p>元素是直接與<h1>元素相鄰的元素時(shí)，這條規(guī)則才起作用。
第二條規(guī)則里使用了一個(gè)更為復(fù)雜的相鄰選擇器。它表示如果一個(gè)<p>元素直接相鄰于另一個(gè)<p>元素，并且后者也直接相鄰于一個(gè)<h1>元素時(shí)，應(yīng)用本規(guī)則中的聲明。
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
|
就像直接子選擇器可以基于父子關(guān)系應(yīng)用樣式一樣，相鄰選擇器可以基于相鄰關(guān)系應(yīng)用樣式。
在很多時(shí)候，如果能基于元素的屬性或?qū)傩灾祽?yīng)用樣式會(huì)很有用。