我们需要了解vue使用scoped是怎么做到样式隔离的，样式底层还是使用的css，css是没有隔离一说，只有权重，选择器这些。我先来看看没有使用scoped时，元素是怎么样的，以及使用scoped时是怎么样的，图一是没有使用，图二是使用了的。
图一
图二
从上图可以看出，使用scoped时是给元素绑定一个data-v-xxx的唯一属性来实现的。如果有多层组件嵌套是什么情况
我这边做了三层，每个组件都只有一个根元素，根元素都是html，从上图看，vue会给每个文件生成一个唯一的data-v-xxx绑定到该文件上的所有元素和样式上，如果遇到组件，会给该组件的根元素也绑定上（多个根元素不绑定）。
- 问题一：在vue3里面一个文件可以有多个根元素，这种情况会怎么样。
- 问题二：如果根元素是组件会怎么样。
首先来看问题一：在vue3里面一个文件可以有多个根元素，这种情况会怎么样
- 会给每个元素绑定该文件生成的data-v-xxx，如果子组件是多个根元素，不会绑定。只有是唯一 一个根元素才会。
问题二：如果根元素是组件会怎么样
如果唯一的根元素是组件就会透传到组件内部去
所以综上所述：使用scoped后
我们再来看看使用深度选择器后css是怎么样的
有时候我们的页面多级嵌套了组件，我们需在子组件里面修改子孙组件里面的样式，使用deep后不起作用，有一种情况是这样的，当前子组件的根元素（或者根元素之一）是组件，而这个组件里面存在多个根元素，那么这个子组件生成的data-v-xxx会作用到css选择上，而在页面上没有对应的html绑定生成的data-v-xxx
解决方式一：如果子组件引入的组件根元素只有一个的情况下，结果如图：
错误的写法：deep和calss之间有空格，是选中不了的，因为他们是同级的。
:deep .box3 {
background-color: #1a1a1a;
}
正确的写法：
:deep.box3 {
background-color: #1a1a1a;
}
解决方式二：如果子组件引入的组件根元素有多个的情况下，结果如图：
我们需要给该引入的组件外层加一层元素或者样式写到父组件上。
当我们遇到问题后，如果能明白其中运行的原理，解决问题就快了。
以上希望能帮助到你。
