Spring boot + Vue 前后整合 之 vue的典型误区

示例
demo1.css

.big{
    font-size: 24px;
    color: red;
}

demo1.vue

<template>
    <p class="big">我是24p的红色</p>
</template>
<style>
    @import "./demo1.css"
</style>

显示效果

demo2.css

.big{
    font-size: 16px;
    color: blue;
}

demo2.vue

<template>
    <p class="big">我是16px的蓝色</p>
</template>
<style>
    @import "./demo2.css"
</style>

显示效果

当然正常浏览这两个页面不会有任何问题
但如果demo2是demo1跳转过来的，由于p标签class都是big，虽然在demo2.css中重写的big的属性。vue的单页面的劣势就来了，上个页面缓存的css将会影响到demo2中的p标签样式，将会和demo1中的p显示效果一致。

如何避免
css编写的时候尽量带上自己独有的父级元素的class，譬如p标签上级div的class是box
则p标签的css写作：

.box > .big {
    font-size: 16px;
  color: blue;
}