样式穿透的区别

在前端开发中，尤其是在使用CSS预处理器或者某些特定的框架（如Vue.js）时，经常会遇到>>>、/deep/、::v-deep、::v-deep()和:deep()这些深度选择器。它们主要用于穿透组件样式隔离（例如Shadow DOM或类似机制），以允许父组件自定义子组件的样式。以下是它们的区别与用法：

1. >>>(不推荐)：

这是一个较为早期的选择器，用于在父组件中影响子组件的样式。

但是构建工具（如Webpack的vue-loader）处理单文件组件(SFC)的方式，>>>可能不会直接按照预期工作，特别是在某些预处理器（如Sass）中，因为这些工具需要特殊处理才能正确解析这个组合符。

.parent >>> .child { color: red; }

2. /deep/(在其他cli中推荐，vue-cli不推荐)：

/deep/ 是一个SCSS和LESS中的深度选择器，作用类似于>>>。

/deep/ 是为了解决>>>在一些CSS预处理器中的不兼容问题而引入的。它是作为深度选择器的一种替代语法，在预处理器中表现更好。 在底层，构建工具会将/deep/转换为更广泛支持的选择器模式，以便能够穿透样式作用域。

.parent /deep/ .child { color: red; }

3. ::v-deep(vue2项目中推荐)：

在Vue.js项目中，当使用vue-loader进行单文件组件(SFC)的处理时，推荐使用::v-deep来替代>>>和/deep/。

::v-deep 更加语义化，明确指出这是一个深度选择器，有助于提高代码可读性。

.parent ::v-deep .child { color: red; }

4. ::v-deep()(不推荐)

这个语法是在 vue2 向 vue3 过渡期间提出的一个过渡性组合器，并没有太大意义。

5. :deep()(vue3项目推荐):

在较新版本的Vue.js中引入的:deep()更加简洁，适合现代Vue项目。这种变化旨在进一步标准化和简化深度选择器的使用。

.parent :deep(.child) { color: red; }

总结

• 对于Vue3项目，强烈推荐使用:deep()，其他的在较新版本的vite中已经提示警告了。另外这也是因为Vue团队正在推动标准化，而且这些选择器提供了更好的兼容性和清晰度。
• 如果你正在维护一个Vue2的旧项目，更推荐使用/deep/。