css 中类叠加相同属性的取值问题

概述对于一个元素使用多个类，其中一个属性在多个类中有不同取，那么最终的该元素该属性取是取那个呢？当然是优先级高的覆盖优先级低的。考虑一个css链接文件盒一个html文件。css中：.form-control{width: 100% ;...}.width-control{width:60% ;}html

对1个元素使用多个类，其中1个属性值在多个类中有不同取值，那末终究的该元素该属性取值是取那个呢？

固然是优先级高的覆盖优先级低的。

斟酌1个CSS链接文件盒1个HTML文件。

CSS中：

.form-control{ wIDth: 100% ; ...}.wIDth-control{ wIDth:60% ;}

HTML中：

1. <div class="form-control wIDth-control">...</div> 2. <div class="wIDth-control form-control">...</div>

上述在HTML中改变类的书写顺序，发现有效值均为wIDth:60%，说明在HTML中1个class中并列的类书写前后顺序不影响覆盖顺序.

改变在CSS中定义的顺序，以下：

.wIDth-control{ wIDth:60% ;}.form-control{ wIDth: 100% ; ...}
 

此时有效值均为wIDth:100%,这说明类的优先级是由类在CSS文件中定义的顺序决定的：越后定义优先级越高！

 总结

以上是内存溢出为你收集整理的css 中类叠加相同属性的取值问题全部内容，希望文章能够帮你解决css 中类叠加相同属性的取值问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。