使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式方法

發(fā)布時(shí)間：2020-10-15 17:12:50 作者：張小益達(dá)

這篇文章主要介紹了使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

用CSS偽元素控制元素的時(shí)候經(jīng)常性的需要改變一些元素的樣式，網(wǎng)上有許多博客都說了如何去控制一個(gè)的改變，但是我在實(shí)際寫的過程中，發(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á)不到效果的；或者只寫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是相鄰的，所以我就可以去開始控制了，能控制到D同理

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

到此這篇關(guān)于使用CSS偽元素控制連續(xù)幾個(gè)元素的樣式方法的文章就介紹到這了,更多相關(guān)CSS 偽元素控制元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！