相鄰兄弟選擇器 (+) 介于兩個(gè)選擇器之間,當(dāng)?shù)诙€(gè)元素緊跟在第一個(gè)元素之后,并且兩個(gè)元素都是屬于同一個(gè)父元素的子元素,則第二個(gè)元素將被選中。
選擇所有緊接著 <div> 元素之后的第一個(gè) <p> 和第一個(gè)<span>元素:
<!DOCTYPE html>
<html>
<title>菜鳥(niǎo)教程(cainiaoplus.com)</title>
<head>
<style>
div+p
{
background-color:red;
color:white;
}
div+span {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>歡迎來(lái)到菜鳥(niǎo)教程(www.jixiangtaizi.com.cn)</h1>
<div>
<p>我們的網(wǎng)址是:www.jixiangtaizi.com.cn.</p>
<p>我們的網(wǎng)站名稱(chēng)是:菜鳥(niǎo)教程.</p>
<span>演示相鄰兄弟選擇器</span>
<span>演示相鄰兄弟選擇器</span>
</div>
<p>我們?yōu)槟峁└鞣N菜鳥(niǎo)教程學(xué),學(xué)好基礎(chǔ),你才能走的更遠(yuǎn)!</p>
</body>
</html>測(cè)試看看 ?/?former_element + target_element { style properties }element+element 相鄰兄弟選擇器用于選擇(不是內(nèi)部)指定的第一個(gè)元素之后緊跟的元素。
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持 element+element 相鄰兄弟選擇器。
注意: element+element在IE8中運(yùn)行,必須聲明 <!DOCTYPE>完整CSS選擇器參考手冊(cè)