css3關(guān)系選擇器怎么使用

這篇文章主要講解了“css3關(guān)系選擇器怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css3關(guān)系選擇器怎么使用”吧！

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)西陵,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

css3關(guān)系選擇器有4種：1、包含選擇器“E F”，選擇所有被E元素包含的F元素；2、子代選擇器“E>F”，選擇所有作為E元素的直接子元素F；3、相鄰選擇器“E+F”，選擇緊跟E元素后的F元素；4、兄弟選擇器“E~F”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3中的關(guān)系選擇器主要包括包含選擇器、子代選擇器、相鄰選擇器和兄弟選擇器：

• 包含選擇器由符號(hào)空格“ ”連接

• 子代選擇器由符號(hào)“>”連接

• 相鄰選擇器由符號(hào)“+”連接

• 兄弟選擇器由符號(hào)“～”連接

下面我們將詳細(xì)講解一下。

包含選擇器（E F）

選擇所有被E元素包含的F元素，中間用空格隔開

ul li{color:green;}


  
寶馬
  
奔馳


  
奧迪

CSS3子代選擇器(E>F)

子代選擇器主要用來(lái)選擇某個(gè)元素的第一級(jí)子元素。例如希望選擇只作為h2元素子元素的strong元素，可以這樣寫：h2> strong。

下面通過一個(gè)案例對(duì)子代選擇器(>)的用法進(jìn)行演示，如圖所示：

    
    
    


    
這個(gè)知識(shí)點(diǎn)很重要
　  
PHP中文網(wǎng)歡迎你！

在上述代碼中，第15行代碼中的strong元素為h2元素的子元素，第16行代碼中的strong元素為h2元素的孫元素，因此代碼中設(shè)置的樣式只對(duì)第15行代碼有效。

CSS3兄弟選擇器(E+F)

該選擇器使用加號(hào)“+”來(lái)鏈接前后兩個(gè)選擇器。選擇器中的兩個(gè)元素有同一個(gè)父親，而且第二個(gè)元素必須緊跟第一個(gè)元素。

下面通過一個(gè)案例對(duì)臨近兄弟選擇器的用法進(jìn)行演示。

    
    
    
        p + h3{
            color: green;
            font-family: "宋體";
            font-size: 20px;
       }

    


　
　  
《贈(zèng)汪倫》
　  
李白乘舟將欲行，
　  
忽聞岸上踏歌聲。
　  
桃花潭水深千尺，
　  
不及汪倫送我情。

在上述代碼中，第7～11行代碼用于為p元素后緊鄰的第一個(gè)兄弟元素h3定義樣式。從結(jié)構(gòu)中看出p元素后緊鄰的第一個(gè)兄弟元素所在位置為第17行代碼，因此第17行代碼的文字內(nèi)容將以所定義好的樣式顯示。

從圖中可以看出，只有緊跟p元素的h3元素應(yīng)用了代碼中設(shè)定的樣式。

CSS3相鄰選擇器(E~F)

普通兄弟選擇器使用“～”來(lái)鏈接前后兩個(gè)選擇器。查找某一個(gè)指定元素的后面的所有兄弟結(jié)點(diǎn)。

下面通過一個(gè)案例對(duì)普通兄弟選擇器的用法進(jìn)行演示，如下所示。

    
    
    
        p ~ h3{
            color: pink;
            font-family: "微軟雅黑";
            font-size: 20px;
       }
    


　
    
《贈(zèng)汪倫》
    
李白乘舟將欲行，
    
忽聞岸上踏歌聲。
    
桃花潭水深千尺，
    
不及汪倫送我情。

從圖中可以看出，p元素后面的所有兄弟元素h3都應(yīng)用了代碼中所設(shè)定的樣式。

感謝各位的閱讀，以上就是“css3關(guān)系選擇器怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)css3關(guān)系選擇器怎么使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

標(biāo)題名稱：css3關(guān)系選擇器怎么使用
新聞來(lái)源：http://m.jiaotiyi.com/article/geigds.html