Test instance learning, about writing CSS sequence research

Css

The last defined CSS style overrides all existing or conflicting styles defined before it, such as the following example:

p {color:red; Background:yellow}
p {Color:green}

The above paragraph will eventually render a green font, with a yellow background, this is because the last defined Color:green is covered by the previously defined red, and the reason why the yellow background does not disappear is because the definition of the second P has no definition of the conflict, so it is still valid.

Do you really understand? Okay, let's do a little test:

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

...

<p class= "Red Green Blue" >sample text.</p>
<p class= "Green Blue Red" >sample text.</p>
<p class= "Blue Red Green" >sample text.</p>

What color will the text appear in the three paragraphs above when it is finally displayed?

Think about ^_^.

The answer is that they all appear to be blue, that is, blue, although each paragraph has three P styles applied in different order, it should appear that the color should be determined in the order in which the style is applied, for example, the first one is blue, the second is red, and the third is green, which is actually wrong, This has nothing to do with the order in which styles are applied, and they all end up with the last-specified style, blue in color.