美文网首页网页前端后台技巧(CSS+HTML)
web前端入门到实战:html元素有多个类名时,样式覆盖问题

web前端入门到实战:html元素有多个类名时,样式覆盖问题

作者: 大前端世界 | 来源:发表于2019-11-23 21:40 被阅读0次
    <div class="carousel-item carousel-item-active">
    
                    </div>
    

    有这样的代码段

    .carousel-item-active {
        width: 39.722vw;
        height: 21.667vw;
        border-radius: 2.083vw;
        border: 0.833vw solid rgba(72, 155, 97, 1);
    }
    
    .carousel-item {
        width: 30.556vw;
        height: 16.667vw;
        background: rgba(255, 255, 255, 1);
        border-radius: 1.389vw;
        border: 0.278vw solid rgba(214, 214, 214, 1);
    }
    web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
    

    生效的类名以css文件中最后定义的类的样式为准

    比如上面这段代码

    生效的样式是carousel-item的样式

    然后在css样式里面调整两个样式的顺序

    .carousel-item {
        width: 30.556vw;
        height: 16.667vw;
        background: rgba(255, 255, 255, 1);
        border-radius: 1.389vw;
        border: 0.278vw solid rgba(214, 214, 214, 1);
    }
    
    .carousel-item-active {
        width: 39.722vw;
        height: 21.667vw;
        border-radius: 2.083vw;
        border: 0.833vw solid rgba(72, 155, 97, 1);
    }
    

    不修改html元素

    然后此时生效的样式是carousel-item-active

    也就是

     width: 39.722vw;
        height: 21.667vw;
        border-radius: 2.083vw;
        border: 0.833vw solid rgba(72, 155, 97, 1);
    web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
    

    总结:当某个元素绑定多个类名,且样式类中有多个相同属性时,根据编写的先后顺序生效,写在前面的会被后面覆盖,而与html中class属性中的类名书写关系么有关系

    相关文章

      网友评论

        本文标题:web前端入门到实战:html元素有多个类名时,样式覆盖问题

        本文链接:https://www.haomeiwen.com/subject/rakuictx.html