[CSS] 当多个CSS文件对同一个元素属性进行设置,会发生什么?
本文来自于我的个人博客,有兴趣的朋友可以过来瞧瞧: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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。