近期笔者使用Vue3 + TS写项目的时候，使用深度选择器发现如下提示
[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
一、深度选择器淘汰
>>>
/deep
和如下的写法在vue3.x中被淘汰了
<style lang="less" scoped>/deep/ .ant-table-tbody > tr > td,/deep/ .ant-table-thead > tr > th {vertical-align: middle !important;}::v-deep .ant-table-tbody > tr > td,::v-deep .ant-table-thead > tr > th {vertical-align: middle !important;}:deep .ant-table-tbody > tr > td,:deep .ant-table-thead > tr > th {vertical-align: middle !important;}</style>
二. 解决办法
以下四种写法均不会报出警告。
<style lang="less" scoped>// 第一种:v-deep .ant-table-tbody > tr > td,:v-deep .ant-table-thead > tr > th {vertical-align: middle !important;}// 第二种::v-deep(.ant-table-tbody > tr > td),::v-deep(.ant-table-thead > tr > th) {vertical-align: middle !important;}// 第三种:v-deep(.ant-table-tbody > tr > td),:v-deep(.ant-table-thead > tr > th) {vertical-align: middle !important;}// 第四种:deep(.ant-table-tbody > tr > td),:deep(.ant-table-thead > tr > th) {vertical-align: middle !important;}</style>
但是使用了 :deep () 之后发现部分IDE工具会报出如下错误
unknown pseudo selector ‘deep’
