我怎样才能找出什么CSS重写我的样式表中的CSS？

我创建了一个链接到我的html页面的打印样式表。对字体，颜色等的更改可以在打印版本中使用，但我无法在打印版本中更改我的div的大小。例如，如果我的网页上有一个300px X 300px的内容div，如果我更改打印版本中的尺寸，它将不会更改它。为了找出问题的根源，我使用了inspect元素来查看一个css是否覆盖了我的打印页面。我发现内容div宽度是由身体宽度控制的。所以我试着改变打印样式表中的内容高度和body div。这没有用。我也尝试为主css和打印css创建单独的样式表。这没有用。有没有另一种方法可以解决这个问题...类似于断点的东西也许，但对于HTML？我怎样才能找出什么CSS重写我的样式表中的CSS？

HTML：

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <!--- TITLE - FROM SPECIFIC TO GENERAL ---> 
    <title>Page</title> 
    <cfinclude template="/assets2011/webfonts/comment.htm" /> 
    <link rel="stylesheet" type="text/css"  href="/assets2011/MyFontsWebfontsOrderM2845569_css.css" /> 
    <link rel="stylesheet" type="text/css" href="/assets2011/css/global.css" /> 
    <link href="print.css" type="text/css" rel="stylesheet" media="print"/> 
    <style> 

    body{ 
    width: 8700px; 
    height:2000px; 
    overflow: hidden; 
    } 
    #section{ 
    width: 8000px; 
    float: left; 
     height: 1000; 
     z-index: 1; 
     } 
     #content{ 
     width: 1000px; height:300px; margin-top: 10px; margin-left: 50px; overflow: auto; 
     } 
     .navbarLeft{ 
     height: 700px; 
     width: 40px; 
     top:0; 
    z-index: 2; 
     position:absolute; 
     background-position: 50% 30%; 
     background-image: url(navL.png); 
    background-repeat: no-repeat; 
    opacity: 0.05; 
     } 
     .navbarLeft:hover{ 
     opacity: 0.5; 
     } 
     .navbarRight{ 
     height: 700px; 
     width: 40px; 
    top: 0; 
    z-index: 2; 
    position: absolute; 
    background-position: 50% 30%; 
    background-image: url(navR.png); 
    background-repeat: no-repeat; 
    opacity: 0.05; 
    left: 2013px; 
    } 
    .navbarRight:hover{ 
     opacity: 0.5; 
    } 
    table,tr,td { 
    border:1px solid black; 
    } 

    </style> 

    </head> 
     <body> 
     <!--Factor 1--> 
    <div class="section" id="factor1"> 
    <div id="content"> 
    <!--Begin Content--> 
      <p>textiyiuypilkhjkujp;mjl;juipoupoj;hikhiyuiuj</p> 
     </div> 
    <!--End Content--> 

     <!-- Navigation --> 
    <ul class="nav"> 
    <a href="#factor2"><div class= "navbarLeft" id="menu" style="left: 755px;"></div></a> 
     </ul> 
     </div> 
     <!--End Factor 1--> 


    <!--Factor 2--> 
    <div class="section" id="factor2"> 
    <div id="content"> 
     <p>text2khlikhlkj;ljlji0piomloj;lkjoippm,klikp</p> 
    </div> 
    <ul class="nav"> 
    <a href="#factor1"><div class= "navbarRight" id="menu" style="left: 2005px;"></div> 
     </a> 
    <a href="#factor3"><div class= "navbarLeft" id="menu" style="left: 2755px;"></div></a> 
    </ul> 
    </div> 
    <!--End Factor 2--> 

    <!--JavaScript--> 
    <script type="text/javascript" 
       src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="../newUI/jquery.easing.1.3.js"></script> 
    <script type="text/javascript"> 
      $(function() { 
       $('ul.nav a').bind('click',function(event){ 
        var $anchor = $(this); 
        $('html, body').stop().animate({ 
         scrollLeft: $($anchor.attr('href')).offset().left 
        }, 1000); 
        event.preventDefault(); 
       }); 
      }); 
     </script> 
     </body> 
    </html>

CSS打印样式表：

 body{ 
     width: 1000px; 
     } 

    #section, .navbarLeft, .navbarRight{ 
    display:none; 
    } 

    #content{ 
     font-size: 110px; 
     overflow:visible; 
     height: 1000px; 
     page-break-after: always; 
     margin-top:10px; 
     margin-left:50px; 
    } 

    p a:after { 
    content: " (" attr(href) ")"; 
    font-size: 50%; 
    }

来源

2013-04-24 JustBlossom