”連接,兄弟選擇器由符號“+”和“~”連接,下面我們將詳細講解這兩種選擇器。" />
更新時間:2021-09-23 來源:黑馬程序員 瀏覽量:
CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號“>”連接,兄弟選擇器由符號“+”和“~”連接,下面我們將詳細講解這兩種選擇器。
子代選擇器主要用來選擇某個元素的第一級子元素。例如希望選擇只作為h1元素子元素的strong元素,可以這樣寫:h1> strong。
下面通過一個案例對子代選擇器(>)的用法進行演示,如圖所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3子代選擇器用法-http://web.itheima.com</title> <style> h1 > strong { color: red; font-size: 20px; font-family: "微軟雅黑"; } </style> </head> <body> <h1>這個<strong>知識點</strong>很<strong>重要</strong></h1> <h1>傳智<em><strong>教育</strong></em>歡迎你!</h1> </body> </html>
在上述代碼中,第15行代碼中的strong元素為h1元素的子元素,第16行代碼中的strong元素為h1元素的孫元素,因此代碼中設(shè)置的樣式只對第15行代碼有效。
兄弟選擇器用來選擇與某元素位于同一個父元素之中,且位于該元素之后的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。對它們的講解如下。
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元素應(yīng)用了代碼中設(shè)定的樣式。
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都應(yīng)用了代碼中所設(shè)定的樣式。
猜你喜歡: