搞懂＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法

1. >>>

在Vue单文件组件中，我们通常会搭配css预处理器使用。但Sass之类的预处理器无法正确解析>>>，所以不推荐使用>>>

 2. /deep/

/deep/曾经是CSS中实际提出的新增功能，但之后被删除，所以不建议使用。

3. ::v-deep

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

**兼容性：**支持Vue2，但在Vue3中不推荐使用。

 4. ::v-deep()

支持Vue3，但在编译时被视为已弃用并会引发警告

5. :deep()

:deep()是Vue3官方推荐的深度选择器，不建议使用>>>和/deep/以及::v-deep包括::v-deep()。

**兼容性：**支持Vue3，但在Vue2中不可使用。

 

>>> → /deep/ → ::v-deep → ::v-deep() → :deep()

可以明显看到深度选择器的演化趋势

关系选择器 → 伪元素 → 伪类 

 6 结论

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