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代码定义相同级别之间后来的会覆盖前来的。