在 Vue 开发中，有时候样式需要穿透才能生效，通常是因为使用了作用域样式 (scoped styles) 的缘故。
1. 什么是作用域样式 (scoped styles)?
在 Vue 单文件组件 (SFC) 中，使用 <style scoped> 声明的样式只会作用于当前组件的元素。Vue 在编译时会通过生成唯一的动态属性（如 data-v-xxxxxx）的方式，为每个组件的 DOM 节点加上标记，从而实现样式的作用域隔离。
例如：
<template><div class="box">Hello</div>
</template><style scoped>
.box {color: red;
}
</style>
编译后，HTML 可能会变成：
<div class="box" data-v-123abc>Hello</div>
CSS 会变成：
.box[data-v-123abc] {color: red;
}
2. 为什么有时需要样式穿透？
有些情况下，你需要修改子组件或第三方库中的样式，这些样式可能处于另一个作用域或者被深层封装。直接在 <style scoped> 中定义样式通常无法生效，因为作用域样式只针对当前组件的 DOM 节点。
例如，想要覆盖子组件的样式：
<template><child-component></child-component>
</template><style scoped>
/* 尝试覆盖子组件内部的样式 */
.some-class {color: blue;
}
</style>
以上代码不会生效，因为 .some-class 的作用域被限制在父组件，无法穿透到子组件或其内部的 DOM。
3. 如何实现样式穿透？
在 Vue 3 中，::deep() 是用于样式穿透的一种语法，替代了之前的 /deep/ 和 >>> 的用法。它允许你跨越作用域样式的限制，修改子组件或嵌套元素的样式。这样，你可以在父组件中应用样式来影响子组件的样式，尤其是当你无法直接修改子组件代码时。
::deep() 用法
::deep() 是一个 Vue 3 中的特殊选择器，用来进行样式穿透，能够影响嵌套的子组件样式。它是一个更为正式和规范的方式，代替了 Vue 2 中使用的 /deep/ 或 >>>。
基本语法
<template><child-component></child-component>
</template><style scoped>
::deep(.child-class) {color: red;
}
</style>
在这个例子中，::deep(.child-class) 会将 .child-class 类的样式应用到 child-component 组件内的 .child-class 元素上，即使它是在子组件中定义的，也能被父组件的样式影响。
具体解释
::deep()可以用来选择子组件内的 DOM 元素或样式，突破组件的作用域限制。- 它的作用类似于一个全局选择器，能够选择嵌套组件内部的元素，虽然这些元素本身是被
scoped样式保护的。 ::deep()还可以用于组合选择器、伪类、伪元素等。
例子：穿透嵌套子组件
假设有一个子组件 ChildComponent.vue，其中有一个 .btn 类的按钮样式，你希望在父组件中控制这个按钮的样式。
子组件 ChildComponent.vue：
<template><button class="btn">Click me</button>
</template><style scoped>
.btn {background-color: green;color: white;
}
</style>
父组件 ParentComponent.vue：
<template><child-component></child-component>
</template><style scoped>
::deep .btn {background-color: red; /* 覆盖子组件按钮的背景色 */color: yellow; /* 改变文字颜色 */
}
</style>
在这个例子中，::deep .btn 会把父组件的样式应用到子组件的 .btn 按钮上，将其背景色从绿色改为红色，文字颜色改为黄色。
::deep() 的注意事项
-
全局影响：虽然
::deep()可以穿透作用域样式，但它仍然会影响到子组件的样式，因此可能会导致子组件的样式被外部影响，破坏组件的封装性。要谨慎使用。 -
仅适用于
scoped样式：::deep()主要用于作用域样式下的穿透，如果不使用scoped，那么你就不需要使用::deep()，样式本来就没有作用域隔离。 -
Vue 3 新特性：
::deep()是 Vue 3 引入的语法。如果你使用的是 Vue 2，应该使用/deep/或>>>。
4. 小结
在实际开发中，优先考虑保持组件样式隔离，避免直接修改子组件样式，以提高组件的可维护性和独立性。
