According to our understanding of CSS precedence, the last defined CSS style will override all existing or conflicting styles defined before it, such as the following example:
| The following is the quoted content: Example Source Code: p { color: red; background: yellow } |
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.
Let’s see the running effect:
| The following is the quoted content: Source Code to Run: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { color: red; background: yellow }p { color: green }</style></head><body><p>admin5</p></body></ html> <p class="red green blue">www.admin5.com</p> <p class="green blue red">admin5</p> <p class="blue red green">www.admin5.com</p> |
Maybe you think you already understand. Do you really understand? Okay, let's do a little test.
| The following is the quoted content: Example Source Code: .red { color: red } .green { color: green } .blue { color: blue } ... <p class="red green blue">admin5</p> <p class="green blue red">Webmaster’s learning paradise</p> <p class="blue red green">www.admin5.com</p> |
Please tell me, what color will the text in the three paragraphs above appear when it is finally displayed?
Please don’t rush to run the following code. Think about it, what color will it be?
Okay, you have already thought about it, let’s see the effect of operation:
| The following is the quoted content: Source Code to Run: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { color: red }.green { color: green }.blue { color: blue }</style></head><body><p class=" red green blue">admin5</p><p class="green blue red">Webmaster Learning Paradise</p><p class="blue red green">www.admin5.com</p></body ></html> |
The answer is that they are all displayed as blue, that is, blue. Although each paragraph has three paragraph 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 first 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! Please don’t worry if you encounter similar problems in the future, because the above experiment has already given you the answer.