vue开发中经常会用到这种情况：
A页面有类选择器name_box,B界面也设置了name_box，注意到没有，这两个类选择器名字一模一样。
当A界面push到B界面的时候，查看B界面的元素，会有一个特别奇怪的现象：你会发现A界面的样式也会应用到B界面上。只是会由于权重的关系，两个name_box中 重叠的样式，权重高的会生效。两个name_box中不重叠的样式，都会生效。
对以上问题详细举个例子，例如：
- A界面的类选择器
.name_box{
font-size:18px;
background-color:red;
}
- B界面的类选择器
.name_box{
background-color:blue;
}
那么最终B界面name_box的样式为，字号18px背景颜色为蓝色。但是我们明明只是想设置背景颜色为蓝色，不要设置字号。
解决办法1：
A和B类选择器名字不要一样。
解决办法2：使用scoped实现，样式只在当前界面生效，解决以上样式污染的问题
以B界面为例
<style scoped>
.name_box{
background-color:blue;
}
</style>
网友评论