![9e8a98a099758582153af7253906ab2d.png](https://i-blog.csdnimg.cn/blog_migrate/cb4b3396f23e95c9c7b0bc728471d26e.jpeg)
<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);
}
生效的类名以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);
总结:当某个元素绑定多个类名,且样式类中有多个相同属性时,根据编写的先后顺序生效,写在前面的会被后面覆盖,而与html中class属性中的类名书写关系么有关系
在学习上有什么疑问随时可以找我,与大家分享互联网web前端实战操作,无论你是否有基础,我都欢迎。点:前端技术分享