站長資訊網(wǎng)
css3中兄弟選擇器的語法：1、“+”兄弟選擇器，語法為“指定元素+選擇元素{css代碼}”，該選擇器表示選擇某元素后相鄰的兄弟元素；2、“～”兄弟選擇器，語法為“指定元素～選擇元素{css代碼}”，該選擇器表示某元素后所有同級的指定元素。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
CSS3兄弟選擇器的語法是什么
CSS3兄弟選擇器(+、～)
兄弟選擇器用來選擇與某元素位于同一個父元素之中，且位于該元素之后的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。對它們的講解如下。
1. 臨近兄弟選擇器
該選擇器使用加號“+”來鏈接前后兩個選擇器。選擇器中的兩個元素有同一個父親，而且第二個元素必須緊跟第一個元素。
下面通過一個案例對臨近兄弟選擇器的用法進行演示。
<!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>《贈汪倫》</h2> <p>李白乘舟將欲行，</p> <h2>忽聞岸上踏歌聲。</h2> <p>桃花潭水深千尺，</p> <h2>不及汪倫送我情。</h2> </body> </html>
在上述代碼中，第7～11行代碼用于為p元素后緊鄰的第一個兄弟元素h2定義樣式。從結(jié)構(gòu)中看出p元素后緊鄰的第一個兄弟元素所在位置為第17行代碼，因此第17行代碼的文字內(nèi)容將以所定義好的樣式顯示。
從圖中可以看出，只有緊跟p元素的h2元素應用了代碼中設定的樣式。
2.普通兄弟選擇器
普通兄弟選擇器使用“～”來鏈接前后兩個選擇器。查找某一個指定元素的后面的所有兄弟結(jié)點。
下面通過一個案例對普通兄弟選擇器的用法進行演示，如下所示。
<!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>《贈汪倫》</h2> <p>李白乘舟將欲行，</p> <h2>忽聞岸上踏歌聲。</h2> <h2>桃花潭水深千尺，</h2> <h2>不及汪倫送我情。</h2> </body> </html>
從圖中可以看出，p元素后面的所有兄弟元素h2都應用了代碼中所設定的樣式。
（學習視頻分享：css視頻教程）
