html元素有多个类名时,样式覆盖问题

<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属性中的类名书写关系么有关系

发布了268 篇原创文章 · 获赞 17 · 访问量 5762
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览