這篇文章主要為大家展示了怎么使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“怎么使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式”這篇文章吧。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有上思免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

用CSS偽元素控制元素的時(shí)候經(jīng)常性的需要改變一些元素的樣式，網(wǎng)上有許多博客都說(shuō)了如何去控制一個(gè)的改變，但是我在實(shí)際寫(xiě)的過(guò)程中，發(fā)現(xiàn)更多時(shí)候是需要控制多個(gè)連續(xù)元素的改變。

使用偽元素去控制（以:hover為例），當(dāng)鼠標(biāo)停留在A時(shí)，BCD.....樣式的改變

A與BCD....是相鄰?fù)?jí)關(guān)系，要求A在BCD的最上面

<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>

//相應(yīng)用A控制BCD的CSS代碼
    .A:hover + .B{
        background-color: orange;
    }
    .A:hover + .B+ .C{
        background-color: orange;
    }
    .A:hover + .B+ .C+ .D{
        background-color: orange;
    }

如果把A換到其他位置，是達(dá)不到效果的；或者只寫(xiě)CSS的最下面的控制代碼只能控制第三個(gè)元素的樣式改變，多個(gè)是達(dá)不到一起改變的。

A是BCD....是父子關(guān)系

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</div>

//相應(yīng)的CSS代碼
    .A:hover .B{
        background-color: orange;
    }
    .A:hover .B+ .C{
        background-color: orange;
    }
    .A:hover .B+ .C+ .D{
        background-color: orange;
    }

第一份，其實(shí)很好理解，因?yàn)閑lement+element是去控制相鄰的元素，因?yàn)锳與CD不是直接相鄰，那我就一級(jí)級(jí)的去尋，首先到B，因?yàn)锽C是相鄰的，所以我就可以去開(kāi)始控制了，能控制到D同理

而第二份代碼，element　element是父節(jié)點(diǎn)控制子節(jié)點(diǎn)的方法，A可以直接控制B，如果需要控制C，那么先尋到B到后因?yàn)锽C相鄰，我再去用相鄰元素控制的方法去控制C，D同理。

以上就是關(guān)于“怎么使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式”的內(nèi)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：怎么使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式
網(wǎng)站鏈接：http://www.chinadenli.net/article24/gpdoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、Google、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)