本文来自于我的个人博客，有兴趣的朋友可以过来瞧瞧：http://jerryzou.com
CSS作为Web前端的三剑客之一，有着极为重要的地位。它使得页面的表现与内容很好地分离开来，如今各大浏览器对它的支持也日趋完善起来。
但是多处CSS文件对同一个元素或者类的样式进行修改的情况屡见不鲜，以至于在代码量成几何倍增加时，有时会让人产生迷惑感。下面举个例子：
<!-- test.html -->
<head>
...
<link href="res/css/test1.css" type="text/css" rel="stylesheet">
<link href="res/css/test2.css" type="text/css" rel="stylesheet">
</head>
/* test1.css */
body { background: yellow; }
body { background: blue; }
/* test2.css */
body { background: black; }
body { background: red; }
这里有四个地方对body元素的背景进行设置。在实际解析中，哪次设置将会被采用呢？
答案是最后一次，也就是test2.css中值为red的那次设置。因为在样式中对同一个元素的属性发生重复设置时，后一次会覆盖前一次。在例子中，如果test1.css的引入顺序在test2.css之后的话，则会发现背景颜色变成蓝色了。
转载请注明出处：jerryzou.com