[CSS] What happens when multiple CSS files set the same element attribute?

This article from my personal blog, interested friends can come look: http://jerryzou.com

As one of the three swordsmen of the Web Front-end, CSS plays an extremely important role. It separates the page performance from the content, and the support of various browsers is now increasingly improved.

However, it is not uncommon for multiple CSS files to modify the style of the same element or class, so that when the amount of Code increases exponentially, it is sometimes confusing. The following is an example:

 ...

 

 

/* Test1.css */body {background: yellow;} body {background: blue ;}

/* Test2.css */body {background: black;} body {background: red ;}

Here, you can set the background of the body element in four places. In actual parsing, Which setting will be used?

The answer is the last question, and the value of test2.css is red. BecauseWhen the attribute of the same element is repeatedly set in the style, the last time will overwrite the previous time. In this example, if test1.css is followed by test2.css, the background color turns blue.

Reprinted with the source: jerryzou.com