What is the order of CSS coding? Detailed explanation of CSS coding order

The content of this article is about what is the CSS coding order? The detailed explanation of CSS coding sequence has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS coding order research The last defined CSS style will overwrite all existing or conflicting styles defined before it, such as the following example:

Sample code

p { color: red; background: yellow }
p { color: green }

The above paragraph will eventually appear in green font with a yellow background. This is because the last defined color:green overwrites the previously defined red. As for yellow Why the background does not disappear is because there is no conflicting definition in the second definition of p, so it is still valid.

Do you really understand? Okay, let’s do a small test:

Sample code

p.red { color: red }
p.green { color: green }
p.blue { color: blue }

Sample code

<p class="red green blue">//m.sbmmt.com/</p>
<p class="green blue red">//m.sbmmt.com/</p>
<p class="blue red green">//m.sbmmt.com/</p>

Excuse me, when it is finally displayed, the text in the above three paragraphs will be displayed What color?

The answer is that they are all displayed as blue, that is, blue. Although each paragraph applies the three p styles in a different order, it seems that the color should be determined according to the order in which the styles are applied. For example, the first The first is displayed as blue, the second is displayed as red, and the third is displayed as green. In fact, this is wrong. This has nothing to do with the order in which the styles are applied. They all ultimately obey the last specified style, and the color is blue.

The above is what is the order of CSS coding? A complete introduction to the detailed explanation of CSS coding order. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of What is the order of CSS coding? Detailed explanation of CSS coding order. For more information, please follow other related articles on the PHP Chinese website!