站長(zhǎng)資訊網(wǎng)
css3中兄弟選擇器的語(yǔ)法：1、“+”兄弟選擇器，語(yǔ)法為“指定元素+選擇元素{css代碼}”，該選擇器表示選擇某元素后相鄰的兄弟元素；2、“～”兄弟選擇器，語(yǔ)法為“指定元素～選擇元素{css代碼}”，該選擇器表示某元素后所有同級(jí)的指定元素。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS3兄弟選擇器的語(yǔ)法是什么
CSS3兄弟選擇器(+、～)
兄弟選擇器用來(lái)選擇與某元素位于同一個(gè)父元素之中，且位于該元素之后的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。對(duì)它們的講解如下。
1. 臨近兄弟選擇器
該選擇器使用加號(hào)“+”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，而且第二個(gè)元素必須緊跟第一個(gè)元素。
下面通過(guò)一個(gè)案例對(duì)臨近兄弟選擇器的用法進(jìn)行演示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3緊鄰兄弟選擇器用法-http://web.itheima.com</title> <style type="text/css"> p + h2{ color: green; font-family: "宋體"; font-size: 20px; } </style> </head> <body> <body> <h2>《贈(zèng)汪倫》</h2> <p>李白乘舟將欲行，</p> <h2>忽聞岸上踏歌聲。</h2> <p>桃花潭水深千尺，</p> <h2>不及汪倫送我情。</h2> </body> </html>
在上述代碼中，第7～11行代碼用于為p元素后緊鄰的第一個(gè)兄弟元素h2定義樣式。從結(jié)構(gòu)中看出p元素后緊鄰的第一個(gè)兄弟元素所在位置為第17行代碼，因此第17行代碼的文字內(nèi)容將以所定義好的樣式顯示。
從圖中可以看出，只有緊跟p元素的h2元素應(yīng)用了代碼中設(shè)定的樣式。
2.普通兄弟選擇器
普通兄弟選擇器使用“～”來(lái)鏈接前后兩個(gè)選擇器。查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。
下面通過(guò)一個(gè)案例對(duì)普通兄弟選擇器的用法進(jìn)行演示，如下所示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3普通兄弟選擇器~用法-http://web.itheima.com</title> <style type="text/css"> p ~ h2{ color: pink; font-family: "微軟雅黑"; font-size: 20px; } </style> </head> <body> <body> <h2>《贈(zèng)汪倫》</h2> <p>李白乘舟將欲行，</p> <h2>忽聞岸上踏歌聲。</h2> <h2>桃花潭水深千尺，</h2> <h2>不及汪倫送我情。</h2> </body> </html>
從圖中可以看出，p元素后面的所有兄弟元素h2都應(yīng)用了代碼中所設(shè)定的樣式。
（學(xué)習(xí)視頻分享：css視頻教程）
