css穿透样式：deep的用法

在前端开发中，尤其是使用 Vue.js 这样的框架时，有时我们需要在子组件中修改或影响由父组件传递下来的样式。然而，由于组件的封装和样式隔离，直接修改子组件中的样式可能不起作用。这时，我们可以使用 ::v-deep 伪元素来实现深度选择，也叫做深度穿透。

在 Vue 3 中，我们可以使用 ::v-deep 来替代 Vue 2 中的 >>> 或 ::v-deep (在单文件组件的

子组件有一个内部元素，你想要从父组件中修改它的样式： 

 
  

 如果你想从父组件中改变这个子元素的颜色，你可以使用 :deep

 
  

在实际代码开发中，可能嵌套的层次非常的复杂

可以通过F12   的【Elements】 来进行元素快速定位

需要注意的是，:deep 只能用于