In the previous article on downcodes.com, we mentioned "rewriting your CSS files to make them more organized and clearly structured". Although this is one of the methods, developing good coding habits has always been what I love about CSS. advocated. Today's article will discuss this content.
The last CSS style defined will override any existing or conflicting styles defined before it, such as the following example:
Example Source Code
[www.downcodes.com] 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 why the yellow background does not disappear, it is because of the second p. There is no conflicting definition in the definition, so it is still valid.
Do you really understand? OK, let's do a little test:
Example Source Code
[www.downcodes.com] p.red { color: red }
p.green { color: green }
p.blue { color: blue }
Example Source Code
[www.downcodes.com] <p class="red green blue">Sample text. downcodes.com</p>
<p class="green blue red">Sample text. downcodes.com</p>
<p class="blue red green">Sample text. downcodes.com</p>
Please tell me, what color will the text in the three paragraphs above appear when it is finally displayed?
The answer is that they are all displayed as blue, that is, blue. Although each paragraph has three p styles applied 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 one is displayed as blue, and the third one is displayed as blue. The second one is displayed as red, and the third one 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.
