Vue SFC范畴内的款式使CSS仅实用于以后组件。在很多状况下，用户通常会遇到这种状况能够改良
Deep Selectors
最后版本的Vue框架，反对 >>> 组合子，以使选择器 “深” 。然而，一些CSS预处理程序(如LESS/SASS)在解析它时遇到了问题，因为这不是一个正式的CSS组合子。
.Modal >>> .ant-select { color:#f00; }起初改用/deep/，它已经是CSS的一个理论增加(甚至是Chrome自带的)，但起初不知什么起因被放弃了。/deep/ 仅被Vue的SFC编译器用作编译时提醒来重写选择器，并在最终的CSS中删除。
.Modal /deep/ .ant-select{ color:#f00; }再起初，vue第二版，引入了另一个自定义组合子::v-deep，这一次更明确地示意这是一个特定于vue的扩大，并应用伪元素语法，以便任何预处理程序都可能解析它。
.Modal ::v-deep .ant-select{ color:#f00; }降级到Vue3之后，官网不再反对对>>>和/deep/的反对。
进而改为CSS伪元素的组合符，应用 ::v-deep() 的工作形式。
.Modal :v-deep(.ant-select){ color:#f00; }当然，
如果你须要显式地针对插槽内容，还能够应用 ::v-sloated() 伪元素。
::v-deep(.bar) {}编译输入:[v-data-xxxxxxx] .bar {}::v-slotted(.foo) {}编译输入:.foo[v-data-xxxxxxx-s] {}::v-global(.foo) {}编译输入:.foo {}如果对你有所帮忙，请顺手点个赞，Coding不易~❤