怎么使用CSS偽元素控制連續幾個元素的樣式

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

用CSS偽元素控制元素的時候經常性的需要改變一些元素的樣式，網上有許多博客都說了如何去控制一個的改變，但是我在實際寫的過程中，發現更多時候是需要控制多個連續元素的改變。

使用偽元素去控制（以:hover為例），當鼠標停留在A時，BCD.....樣式的改變

A與BCD....是相鄰同級關系，要求A在BCD的最上面

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

//相應用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換到其他位置，是達不到效果的；或者只寫CSS的最下面的控制代碼只能控制第三個元素的樣式改變，多個是達不到一起改變的。

A是BCD....是父子關系

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

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

第一份，其實很好理解，因為element+element是去控制相鄰的元素，因為A與CD不是直接相鄰，那我就一級級的去尋，首先到B，因為BC是相鄰的，所以我就可以去開始控制了，能控制到D同理

而第二份代碼，element　element是父節點控制子節點的方法，A可以直接控制B，如果需要控制C，那么先尋到B到后因為BC相鄰，我再去用相鄰元素控制的方法去控制C，D同理。

以上就是關于“怎么使用CSS偽元素控制連續幾個元素的樣式”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。