CSS样式覆盖规则心得

在练习一个网页实战的时候，遇到个很奇怪的问题，经过网上查阅资料才知道 原来是不了解css样式覆盖规则 导致犯了一个低级又不容易发现的错误

一下是解决过程简介：

有两个文件 ①index.html（正确模板）            ②indextest.html（自己练习）

首先 正确模板如下图所示：

源码：index.html

    
    





    

        

            

A portfolio ofJoefrey Mahusay
             

                
• HOME

                
• WORK

                
• ABOUT

                
• CONTACT

             

             

            

        

style.css:

body{
    background:url(../images/bg.gif) repeat-y center;
    color:#8f8f8f;
    
}

reset.css:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

错误文件如下图所示：indextest.html

    
    

    

        

            

A portfolio ofJoefrey Mahusay
             

                
• HOME

                
• WORK

                
• ABOUT

                
• CONTACT

             

             

            

        

以上截图 相信懂的人一眼就看出来了吧 没错 就是因为css文件引入顺序颠倒了一下 所以导致body元素background属性被覆盖 所以indextest.html才会不现实背景图片

根本原因是 根据css样式覆盖原则 在样式权值相同的情况下 后导入的css文件会把先倒入的css文件中的相同元素的相同属性覆盖 所以浏览器才判定被覆盖的无效 样式就不能正确显示了 。。

以上为本人学习过程中的一点小小积累 各位看官大神如有高见 欢迎指点