有这样的代码段
.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);web前端开发学习Q-q-u-n: 600610151,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)
总结:当某个元素绑定多个类名,且样式类中有多个相同属性时,根据编写的先后顺序生效,写在前面的会被后面覆盖,而与html中class属性中的类名书写关系没有关系。
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
![4f104036621b300526b52ed100e5326f.png](https://i-blog.csdnimg.cn/blog_migrate/eebf6fc13624630d35d1efcb06a07c3a.jpeg)
作者:大前端世界
链接:https://www.jianshu.com/p/19b763e6121a