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