应✤用CSS伪原素操纵持续好多个原素的款式方式

日期：2021-03-24 类型：科技新闻 

关键词：小程序 活动，微信小程序demo，微信小程序游戏开发价格，手机小程序怎么做，视频播放微信小程序

用CSS伪原素操纵原素的情况下常常性的必须更改一些原素的款式，在网上有很多blog都讲过怎样去操纵一个的更改，可是我还在具体写的全过程中，发觉大量情况下是必须操纵好几个持续原素的更改。

应用伪原素去操纵（以: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伪原素操纵持续好多个原素的款式方式的文章内容就详细介绍到这了,大量有关CSS 伪原素操纵原素內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：四川交上半年度经济发展“试卷” ：生产制造总 返回下一篇：没有了