For an element using multiple classes, one of the attribute values has different values in multiple classes, so what is the final value of the attribute of the element?
Of course, the one with higher priority overrides the one with lower priority.
Consider a css link file and an html file.
In css:
.form-control{ width: 100% ; ...}.width-control{ width:60% ;}
In html:
1. <div class="form-control width-control">...</div> 2. <div class="width-control form-control">...</div>
When changing the writing order of classes in HTML above, we found that the valid values are all width: 60%, which means that the writing order of parallel classes in a class in HTML does not affect the coverage order.
Change the order defined in css as follows:
.width-control{ width:60% ;}.form-control{ width: 100% ; ...}
The valid values at this time are width:100 %, this shows that the priority of a class is determined by the order in which the class is defined in the css file: the later the class is defined, the higher the priority!
??