html类名定义规则_web前端入门到实战：html元素有多个类名时，样式覆盖问题

有这样的代码段

.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前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

作者：大前端世界
链接：https://www.jianshu.com/p/19b763e6121a