Defining multiple class attributes in HTML is invalid

This time I will bring you the invalid definition of multiple class attributes in HTMLInvalid definition of multiple class attributes in HTMLWhat are the precautionsThe following is a practical case, one Get up and take a look.

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 before, I directly rewrote it, or directly used the ID to set the css attribute. But today I think about it, something seems wrong. . . I have to find the truth! ! !

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

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

The result is green, which gives me My first feeling is: 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_div. 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 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,

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.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!

Related reading:

How the marquee element achieves the effect of scrolling fonts and pictures

How to save the format of HTML's TextArea

The above is the detailed content of Defining multiple class attributes in HTML is invalid. For more information, please follow other related articles on the PHP Chinese website!