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

使用背景：父组件、子组件都使用scoped,想在父组件改变子组件（或第三方组件）的样式时使用。

注意：

① 操作符 >>> 可能会因为无法编译而报错，可以使用 /deep/

② vue3.0 中使用 /deep/ 会报错，更推荐使用 ::v-deep

③ 对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 比较通用

个人经验：子组件的根类名不要写到类名表达式里面；不能使用子组件根名称（第三方组件还没试）

1.在原生css样式中使用

父组件

<template>
  <div id="app">
    <HelloWorld class="hi"/>
  </div>
</template>

<style lang="css" scoped>
/* 方案一 */
/deep/.hello{
  background-color: yellow;
}

/* 方案二 
    第三方组件类名 >>> 不能写子组件的根元素标签/类名（可选：根元素内部元素标签名、类名） {
      样式
      } */
/* 
.hi >>>{
  background-color:yellow;
} 
.hi >>> span{
  color: green;
}
.hi >>> .nihao{
  /* background-color:yellow; */
  color: green;
}
*/
</style>

子组件，与2,3共用一个子组件

<template>
  <div class="hello">
    <span class="nihao">你好啊</span>
  </div>
</template>

<style scoped>
.hello{
  width: 50px;
  height: 50px;
  background-color: red;
}
</style>

2.在less中使用，文末有less安装方式

方式一：/deep/子组件类名的方式，中间不用加空格

方式二：父组件中为子组件起的类名::v-deep{子元素的根元素不用写，直接写样式，对具体元素进行操作}

<template>
  <div id="app">
    <HelloWorld class="hi"/>
  </div>
</template>

<style lang="less" scoped>
/* 方案一 */
// /deep/.hi {
//   background-color:yellow;
//   span{
//     color: green;
//   }
// }

/* 方案二 */
.hi::v-deep{
  background-color: yellow;
  span{
    color: green;
  }
}
</style>

3.在sass中使用，使用的方式，跟less完全一致，::v-deep更常用，/deep/方式报错

高版本的 node的不再用node-sass而是直接用sass

文末有sass安装方式

<template>
  <div id="app">
    <HelloWorld class="hi"/>
  </div>
</template>

<style lang="scss" scoped>
/* 方案一 */
.hi::v-deep{
  background-color: yellow;
  span{
    color: green;
  }
}

/* 方案二 :不能用*/
// /deep/.hi {
//   background-color:yellow;
//   span{
//     color: green;
//   }
// }
</style>

vue和less、sass版本对应关系

"dependencies": {

"sass": "^1.54.5",

"sass-loader": "^7.1.0",

"vue": "^2.6.11",

"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

原文链接：https://blog.csdn.net/qiuyushuofeng/article/details/126530182