Introduction to the invalid solution when defining multiple class attributes in HTML

Define multiple values ​​for the class attribute. It is often found that the defined style is invalid. After testing, when defining multiple class values, you must pay attention to putting your favorite style at the end, otherwise it will be invalid. 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! ! !

In the past, when I encountered this situation, I directly rewritten it, or directly used the ID to set the css attribute. Today, when I think about it, something seems wrong. . . I have to find the truth! ! !

The code is as follows:

<p id="p" class="middle_p padding_10"> 
<span id="s" class="normal_span"></span> 
</p>

The colors I set in the two classes are different. The color set in middle_p is red, and the color set in padding_10 is green.

The result is displayed in green, which gives me the first impression: the direction is reversed!

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

this. . . .

Is that so? ? ?

Open the css file and see that padding_10 is in front of middle_p. Then I swap their positions,

Refresh the browser, red! ! !

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

It can be seen from this example that 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 subsequent html.

For more related articles on invalid solutions when multiple class attributes are defined in HTML, please pay attention to the PHP Chinese website!