deeplabcut算法详解（::v-deep的使用）

在 vue 项目的开发过程    
    
    
   ，使用了 ElementUI 组件且样式 style 使用了 scoped 属性  


     


     


     

，当想要修改组件样式


 




 




 




，发现直接修改不了   

   

   

  ，需去掉 scoped 属性或者使用深度选择器才能修改成功 
    
    
    
。去掉scoped的话又会影响全局样式   

     

     

     
，针对这种情况



  




  




  




，可以使用深度作用选择器（即样式穿透）

1    
    
    
   、当项目中使用的 css 原生样式   


  


  


 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式

<style lang="css" scoped> .el-button >>> span{ color: #f00 } </style>

2  


     


     


     

、当项目中使用的 css 扩展语言是 less    
     
     
     ， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

<style lang="less" scoped> /deep/.el-button{ span{ color: #f00 } } .el-button::v-deep{ span{ color: #f00 } } </style>

3


 




 




 




、当项目中使用的 css 扩展语言是 node-sass




   




   




   




， 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式

<style lang="scss" scoped> .el-button::v-deep{ span{ color: #f00 } } /deep/.el-button{ span{ color: #f00 } } </style>

4   

   

   

  、当项目中使用的 css 扩展语言是 dart-sass 



 



 



， 需要使用 ::v-deep 深度选择器来修改 外用第三方组件的样式                    ，dart-sass不支持 /deep/ 和 >>> 的写法

<style lang="scss" scoped> .el-button::v-deep{ span{ color: #f00 } } </style>

注意：

① 操作符 >>> 可能会因为无法编译而报错




    




    




    



，可以使用 /deep/

② vue3.0 中使用 /deep/ 会报错















，更推荐使用 ::v-deep

③ 对于使用了 css 预处理器（scss    

     

     

     
、sass



  




  




  




、 less）时                   ，深度选择器 ::v-deep 比较通用