css穿透样式：deep的用法

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

在 Vue 3 中，我们可以使用 ::v-deep 来替代 Vue 2 中的 >>> 或 ::v-deep (在单文件组件的 <style scoped> 中)。::v-deep 允许我们选择子组件中的深层嵌套元素，并应用样式。

例如，假设你有一个父组件：

<template>  
   <div class="parent-class">  
       <ChildComponent />  
   </div>  
</template>  
  
<style scoped>  
    .parent-class {  
          color: blue;  
     }  
</style>

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

<template>  
     <div>  
          <span class="child-element">子组件</span>  
     </div>  
</template>  
  
<style scoped>  
     .child-element {  
            color: red; /* 默认样式 */  
      }  
</style>

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

<template>  
       <div class="parent-class">  
               <ChildComponent />  
        </div>  
</template>  
  
<style scoped>  

     :deep(.parent-class .child-element) {  /* 父组件的样式  子组件的样式*/  

            color: green;      /* 修改子组件中的样式 */  

      }

</style>

<style lang="scss" scoped>
   :deep(.n-drawer) {
   
       &.n-drawer--bottom-placement .n-drawer__resize-trigger {
            top: 38px;
            z-index: 9;
       }

       .n-drawer-body-content-wrapper {
            padding: 0;
       }
   }

   :deep(.s-page .s-page-header) {
        margin-bottom: 30px;
   }

</style>

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

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

需要注意的是，:deep 只能用于 <style scoped> 中，它不能用于全局样式或组件外的样式。

此外，过度使用 :deep 可能会导致样式难以维护，因此建议只在必要时使用它。在大多数情况下，更好的做法是通过 props 传递样式或类名，以保持组件的封装性和可复用性。