深度选择器的区别与用法

前言：

在vue项目中，尤其是组件化开发中，有时需要对组件内部的某些样式优化，但vue的样式封装特性（scoped）会阻止外部样式直接作用于组件内部。于是，为了能够跨越组件定制内部元素样式，引入了深度选择器，也称为穿透选择器或阴影穿透选择器。

接下来就讲讲＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法。

1.>>>

>>>是css原生中的深度选择器，用于穿透样式封装。

兼容性：仅在某些特定环境，如webpack的css-loader配置中和原生css中有效，vue单组件中通常需要特定配置才能使用。

⚠️注意：在vue单文件组件中，通常会搭配css预处理器使用，但sass之类的预处理器无法正确解析>>>，所以不推荐使用，可用/deep/或::v-deep代替。

<style scoped>
.parent >>> .child{
font-size:18px;
}
</style>

2./deep/

/deep/曾是css中新增的功能，后被删除，不建议使用。

兼容性：支持css预处理器，如sass、less和css原生样式。

注意⚠️：在vue3中，/deep/不再被官方直接支持，可使用:deep()代替。

<style scoped>
.parent /deep/ .child{
font-size:18px;
}
</style>

3.::v-deep

::v-deep是/deep/的别名深度选择器。

兼容性：支持vue2，但在vue3中不推荐使用。

注意⚠️：在vue3中，::v-deep不再被官方支持，不推荐使用，可使用:deep()代替。

<style scoped>
.parent ::v-deep .child{
font-size:18px;
}
</style>

 4.::v-deep()

::v-deep()是深度选择器从vue2到vue3演化过程中的一个过渡性组合器。

注意⚠️：支持vue3，但在编译时被视为已弃用并引发警告。

<style scoped>
.parent ::v-deep(.child){
font-size:18px;
}
</style>

5.:deep()

:deep()是vue3官方推荐的深度选择器，不建议使用>>>、/deep/、::v-deep和::v-deep()

兼容性：支持vue3，但在vue2中不可使用。

<style scoped>
.parent :deep(.child){
font-size:18px;
}
</style>

结论

1. 在vue2中使用::v-deep()；
2. 在vue3中使用:deep()；
3. /deep/需要与特定版本的浏览器搭配使用，不推荐；
4. 部分css预处理器对>>>支持不佳，不实用css预处理器时可使用，否则不推荐。