关于css:干货关于vue3-SFC-范围内-scopedstyles-样式穿透

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 不易~❤