Invalid solution when multiple class attributes are defined in HTML_HTML/Xhtml_Web page production

In the process of writing HTML, we often define multiple values ​​for the class attribute, but we also often find that the values ​​we define are invalid! ! !

When I encountered this situation in the past, I would directly rewrite it, or directly use the ID to set the css attribute. But today I think about it, something seems wrong. . . I have to find the truth! ! !

Copy code

The code is as follows:

I am in two The colors set in each class are different. The color set in middle_div is red, and the color set in padding_10 is green. The result of

is green. This gave me the first feeling: the direction is reversed!

So I switched the two positions, and it was still green! !

This. . . .

Could it be? ? ?

Open the css file and take a look. Sure enough, padding_10 is in front of middle_div. Then I swapped their positions.

Refreshed the browser, red! ! !

So, when defining multiple class values, be sure to put your favorite style at the end!
But if you add a div in front of padding_10 (assuming the parent element is a div) and it becomes div.padding_10, then you will find that no matter where it is, our p div is always green,

As can be seen from this example, the priority of the css style is determined when the css file is loaded, rather than determined by the position of the class attribute in the html later.