jsp页面引入css时放置的先后顺序导致的差异

由于准备做一个导航栏，效果如图

在页面居中的导航栏，

               

如果将<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

这段代码放到<style>
  body{
         margin: 0 auto;
         width: 800px;
         text-align: center;
  }
  .main{
  margin:0 auto;width: 800px;text-align: center;
  height: 100px;
  }
 
  </style>后面页面的显示就会变成

        这个样子，后来突然发现是因为css代码相互覆盖导致的页面显示差异。由于原来使用的时候全部都是从外部引入的css，现在由于特殊要求，需要对引入的css某些局部风格进行调整，所以会遇到这些问题。注意：css代码定义相同级别之间后来的会覆盖前来的。