在 Vue.js 中，当你使用像 Element UI 这样的 UI 库时，它们的样式通常是全局的，即使你在组件中使用了 scoped 样式（为什么要用scoped），仍然可能需要对这些全局样式进行修改。
为了实现这一点，样式穿透（deep selector）就成为了一种重要的工具。
下面我们以一个名为 AComponent 的组件为例，说明为什么要使用样式穿透，及如何使用不同的穿透选择器（:deep、::v-deep、>>>）来修改 Element UI 的样式。
1. 组件示例
假设我们有一个 AComponent.vue，其中使用了 Element UI 的按钮组件：
<template>
<div class="my-component">
<el-button class="my-button">点击我</el-button>
</div>
</template>
<script>
export default {
name: 'AComponent',
};
</script>
<style scoped>
.my-button {
background-color: blue; /* 这条样式不会生效，因为 Element UI 的样式优先级较高 */
}
</style>
在这个示例中，我们尝试改变 Element UI 按钮的背景色，但由于按钮的样式是全局的，scoped 样式不会影响到它。
2. 使用样式穿透
为了能成功修改 Element UI 的样式，我们可以使用样式穿透选择器。
2.1 使用 :deep
<style scoped>
.my-component :deep(.el-button) {
background-color: blue; /* 通过 :deep 选择器，成功改变 Element UI 按钮的背景色 */
}
</style>
2.2 使用 ::v-deep（推荐使用）
<style scoped>
.my-component ::v-deep .el-button {
background-color: blue; /* 通过 ::v-deep 选择器，成功改变 Element UI 按钮的背景色 */
}
</style>
2.3 使用 >>>
<style scoped>
.my-component >>> .el-button {
background-color: blue; /* 通过 >>> 选择器，成功改变 Element UI 按钮的背景色 */
}
</style>
2.4 使用 /deep/(已弃用，不推荐)
这种方法曾经是 Vue 中的样式穿透方式，但现在已经被弃用，不建议再使用。 因为它会导致样式全局生效，容易造成冲突。
3. 为什么使用样式穿透
- 封装性与可维护性：尽管 Element UI 的样式是全局的，使用样式穿透可以在组件内部控制样式，使组件更加封装和可维护。
- 样式覆盖：样式穿透允许我们覆盖第三方库的样式，以满足具体的设计需求。
- 灵活性：当设计需求变化时，开发者可以快速调整组件的样式，而不是修改全局样式。
总结
使用样式穿透（如 :deep、::v-deep 和 >>>）能够让开发者在使用 UI 库时灵活地控制和修改样式，确保组件的样式符合设计要求，同时保持良好的组件封装性。在实际开发中，根据个人或团队的偏好选择合适的穿透选择器即可。
