”連接,兄弟選擇器由符號(hào)“+”和“~”連接,下面我們將詳細(xì)講解這兩種選擇器。" />
更新時(shí)間:2021-09-23 來源:黑馬程序員 瀏覽量:
CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號(hào)“>”連接,兄弟選擇器由符號(hào)“+”和“~”連接,下面我們將詳細(xì)講解這兩種選擇器。
子代選擇器主要用來選擇某個(gè)元素的第一級(jí)子元素。例如希望選擇只作為h1元素子元素的strong元素,可以這樣寫:h1> strong。
下面通過一個(gè)案例對(duì)子代選擇器(>)的用法進(jìn)行演示,如圖所示:
<!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>這個(gè)<strong>知識(shí)點(diǎn)</strong>很<strong>重要</strong></h1> <h1>傳智<em><strong>教育</strong></em>歡迎你!</h1> </body> </html>
在上述代碼中,第15行代碼中的strong元素為h1元素的子元素,第16行代碼中的strong元素為h1元素的孫元素,因此代碼中設(shè)置的樣式只對(duì)第15行代碼有效。
兄弟選擇器用來選擇與某元素位于同一個(gè)父元素之中,且位于該元素之后的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。對(duì)它們的講解如下。
1. 臨近兄弟選擇器
該選擇器使用加號(hào)“+”來鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親,而且第二個(gè)元素必須緊跟第一個(gè)元素。
下面通過一個(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.普通兄弟選擇器
普通兄弟選擇器使用“~”來鏈接前后兩個(gè)選擇器。查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。
下面通過一個(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è)定的樣式。
猜你喜歡: