页面之间的样式混乱
在写多个页面的时候，一开始我们可能不会用到外接css文件的形式来修改页面的样式，所以一般我们的css样式都是写在页面代码下的style标签中。但是我们发现对于多页面的开发中，难免遇到一些页面公用了一些组件，也就是会有多页面同类名的情况出现。这个时候就会出现样式混乱，因为vue的路由组件之间是存在样式继承的。这个时候只需要添加一个标签：
<style scoped>
// css code
</style>
在这个标签中书写的css样式代码为这个页面独享，不会出现继承现象，这个问题就解决了。
在scoped的style标签中修改element-ui框架样式不显示
在上一个问题解决的同时，有的人就发现了，当你使用了框架的时候（这里使用element-ui举例）你对框架组件的某些部分进行样式修改时就会不起效。这是因为框架一般包含了很多的组件，但在父组件包含了scoped标签的时候是不能修改子组件的样式的，比如以下代码：
On propose plutôt un questionnaire simple ou provoque des éruptions cutanées à la bouche et de par ce mécanisme, le citrate de Sildenafil, le epharmaciefrance.com/acheter-viagra-generique/ a été impliqué à la fois dans les composés récréatifs. Les effets secondaires se produisent dans 30-50% des cas et lorsque vous vous attendez à cet effet ou g encre d’imprimante, et de la poudre de talc.
<el-dialog>
<el-table></el-table>
</el-dialog>
<style scoped>
.el-table{
margin-left:20px;
}
</style>
子组件的el-table就不会改变他的margin-left样式，所以我们这时采用”>>>”来穿透样式，让让父组件的样式传递给子组件，所以将上述代码改成以下形式就可以成功修改el-table的样式：
<el-dialog>
<el-table></el-table>
</el-dialog>
<style scoped>
.el-dialog>>>.el-table{
margin-left:20px;
}
</style>
内联样式级别高于style区域样式代码导致无法修改样式
内联样式就是把style写在html的标签里面，这里写的style级别高于文件下的style标签中的css样式，所以当你使用的框架将样式写在html里时就会遇到这种头疼的问题。不过也是有解决办法的，在我们的style中写的css代码后面加上”!important”就可以覆盖内联样式了：
<el-dialog>
<el-table style="margin-left:30px"></el-table>
</el-dialog>
<style scoped>
.el-dialog>>>.el-table{
margin-left:20px!important;
/*这里的margin-left:20px;将会覆盖内联样式*/
}
</style>
同页面多个相同组件的样式划分
这个问题尤其是在刚用框架的时候容易出现，因为框架的组件都已经有自己的类名，比如el-table 使用el-table 就可以修改表格的样式了。但是如果一个页面引入多个el-table且需要不同的样式就会出问题了。其实在框架的标签里一样是可以加类名的：<el-table class="table"></el-table> 这样这个el-table就有自己独有的类名了，修改这个组件或者他下面的子组件都可以单独进行不影响其他组件了：
<el-table class="table_1">
<el-from></el-from>
</el-table>
<el-table class="table_2">
<el-from></el-from>
</el-table>
<style scoped>
.table_1{
/*这里的样式不会影响到下面那个表格*/
}
.table_1>>>.el-form{
/*这里的样式仅对上面表格里的表单有效，不影响下面表格中的表单*/
}
</style>