The value problem of the same attribute in CSS class overlay

For an element that uses more than one class, where one property value has different values in multiple classes, the final element of the attribute takes that value.

High priority overrides are of course low priority.

Consider a CSS link file box for 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>

above in HTML Change the writing order of the class and find that the valid values are width:60% , stating that the HTML in a class in the sequence of books written in parallel does not affect the order of coverage .

Change the order defined in the CSS, as follows:

. width-control{width:60%;}. form-control{width:100%, ...}

the valid values at this time are width:100%, This indicates that the class Precedence is determined by the class in the CSS the order defined in the file determines : The more you define the higher the priority level!



The value problem of the same attribute in CSS class overlay