我们知道，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件或修改第三方库组件的样式时，你可以使用深度选择器。
在 Vue2.x 有三种选择：
>>>— 有些例如 SASS 预处理器无法正常解析，使用前需注意/deep/和::v-deep— 支持预处理器解析，它们都是>>>的别名，但在 Vue 3.x 将不在被支持。
如果使用后面两种，Vue 会提示你：
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.
在 Vue3.x 中以上语法将替换为 :deep() 和 ::v-deep() 的任意一种。
另外，Vue3 还提供了插槽选择器和全局选择器
:slotted()— 默认情况下，作用域样式不影响由<slot/>渲染的内容，因为它们被认为是由传入它们的父组件所拥有。要明确定位插槽内容，请使用:slotted伪类:global()— 如果只想全局应用一个规则，可以使用global伪类，而不是创建另一个<style>