• 深度选择器＞＞＞ /deep/ ::v-deep亲测好用

    使用背景：父组件、子组件都使用scoped,想在父组件改变子组件（或第三方组件）的样式时使用。
    注意：
    ① 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/
    ② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep
    ③ 对于使用了 css 预处理器（scss 、sass、 less）时， 深度选择器 ::v-deep 比较通用
    个人经验：子组件的根类名不要写到类名表达式里面；不能使用子组件根名称（第三方组件还没试）
    1.在原生css样式中使用
    父组件 
    1. <template>
    2.   <div id="app">
    3.     <HelloWorld class="hi"/>
    4.   div>
    5. template>
    6.  
    7. <style lang="css" scoped>
    8. /* 方案一 */
    9. /deep/.hello{
    10.   background-color: yellow;
    11. }
    12.  
    13. /* 方案二 
    14.     第三方组件类名 >>> 不能写子组件的根元素标签/类名（可选：根元素内部元素标签名、类名） {
    15.       样式
    16.       } */
    17. /* 
    18. .hi >>>{
    19.   background-color:yellow;
    20. } 
    21. .hi >>> span{
    22.   color: green;
    23. }
    24. .hi >>> .nihao{
    25.   /* background-color:yellow; */
    26.   color: green;
    27. }
    28. */
    29. style>

    子组件，与2,3共用一个子组件 
    1. <template>
    2.   <div class="hello">
    3.     <span class="nihao">你好啊span>
    4.   div>
    5. template>
    6.  
    7. <style scoped>
    8. .hello{
    9.   width: 50px;
    10.   height: 50px;
    11.   background-color: red;
    12. }
    13. style>

    2.在less中使用，文末有less安装方式
    方式一：/deep/子组件类名的方式，中间不用加空格
    方式二：父组件中为子组件起的类名::v-deep{子元素的根元素不用写，直接写样式，对具体元素进行操作} 
    1. <template>
    2.   <div id="app">
    3.     <HelloWorld class="hi"/>
    4.   div>
    5. template>
    6.  
    7. <style lang="less" scoped>
    8. /* 方案一 */
    9. // /deep/.hi {
    10. //   background-color:yellow;
    11. //   span{
    12. //     color: green;
    13. //   }
    14. // }
    15.  
    16. /* 方案二 */
    17. .hi::v-deep{
    18.   background-color: yellow;
    19.   span{
    20.     color: green;
    21.   }
    22. }
    23. style>

    3.在sass中使用，使用的方式，跟less完全一致，::v-deep更常用，/deep/方式报错
    高版本的 node的不再用node-sass而是直接用sass
    文末有sass安装方式 
    1. <template>
    2.   <div id="app">
    3.     <HelloWorld class="hi"/>
    4.   div>
    5. template>
    6.  
    7. <style lang="scss" scoped>
    8. /* 方案一 */
    9. .hi::v-deep{
    10.   background-color: yellow;
    11.   span{
    12.     color: green;
    13.   }
    14. }
    15.  
    16. /* 方案二 :不能用*/
    17. // /deep/.hi {
    18. //   background-color:yellow;
    19. //   span{
    20. //     color: green;
    21. //   }
    22. // }
    23. style>

    vue和less、sass版本对应关系

      "dependencies": {

        "sass": "^1.54.5",

      "sass-loader": "^7.1.0",

        "vue": "^2.6.11",

        "less": "^4.1.3",

        "less": "^4.1.3",

      "less-loader": "^7.3.0",

      },

    sass 安装

    cnpm install sass

    cnpm install sass-loader@7.1.0

    less安装

    cnpm install less@4.1.3

    cnpm install less-loader@7.3.0

    参考链接：深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞_俺是老王的博客-CSDN博客_v-deep

  • 相关阅读:
    高層建築設計和建造：從避難層到設備間和防風防火防水的設計理念，酒店住宅辦公樓都有什麽房間（精簡）
    Spring复杂对象的3中创建方法
    阿冰的思考
    前端vue 自定义步骤条
    队列（Queue）
    SpringCloud(三) Ribbon负载均衡
    猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
    4.组件间数据交互
    PCA 在图像分析上的应用
    [航海协会]逆天题
  • 原文地址：https://blog.csdn.net/qiuyushuofeng/article/details/126530182