- <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 属性中的类名书写关系么有关系
来源: http://www.jianshu.com/p/19b763e6121a