目录
一、问题
二、原因
三、解决
使用deep深度选择器的基本步骤
四、总结
1.想在当前的.vue文件中使用/deep/深度选择器修改第三库引入的组件或自定义组件的样式，但是修改不成功
1.自定义组件my-component的结构如下：
<template>
<div class="outer">
<div class="inner">
<div class="content">
<p>写出有效的代码使我快乐！</p>
</div>
</div>
</div>
</template>2.修改样式的方法
1)html文件
<my-component class="myStyle"> </my-component>2)css文件
<style lang="scss" scoped>
.myStyle{
/deep/ .outer{
/deep/ .inner{
/deep/ .content{
background:red;
}
}
}
}
</style>
3.自我感觉良好，没有问题，但是就是不起作用。
IDE还提示了我写的css样式的层次，检查以后更是确信自己没有问题。
4.在控制台检查后才发现这个样式根本就没有生效（在浏览器工具中都看不到样式），只有 myStyle这个 class加在了 class为outer的div上面。
5.多次修改后，才发现原因：deep不能嵌套,无论要修改的样式藏得有多深，只需要使用一次deep就可以了。
1）仅当你的style标签中使用了 scoped 属性，才需要使用 /deep/选择组件内部的 标签。
2）如果你的style标签中没有scoped属性，那么使用 /deep/选择器定义的任何样式都是无效的。直接使用普通的id选择器、类选择器等就可以选择 组件内部深层嵌套的标签
1)在使用组件的地方添加一个自定义class
<my-component class="myStyle"></my-component>2)修改css文件
<style lang="scss" scoped>
.myStyle{
/deep/ .content{
background:red
}
}
<style>3)问题成功解决，浏览器工具中可以看到添加的样式
4)如果浏览器工具中显示样式被删除，可以使用 ！important 提高样式的优先级即可
<style lang="scss" scoped>
.myStyle{
/deep/ .content{
background:red !important
}
}
</style>5)如果你需要同时给嵌套组件内部的多个class添加样式，也只需要使用一次deep即可，deep里面的class正常写即可。
.form-specimen-collection {
color: var(--textColorPrimary);
//只需要在最外层加 v-deep
::v-deep .el-col {
flex-direction: column;
//里面的按照原有的样式写即可
//具体实现效果是：第二行文字变成了 红色
.disabled{
color:red;
}
}
}
6）如果以上方法尝试后仍然有问题。
可以尝试将标签 /deep/改成 ::v-deep ,因为 vue3中 /deep/属性不生效。
如你所见，5）中我使用的是 ::v-deep,因为现在的项目采用 vue3写的。（现发现之前写的有点问题，特来更新）
1.deep不能嵌套,不能嵌套，不能嵌套！
2.无论样式结构多深，deep都只能用一次；否则会失效
3.组件内部嵌套自定义组件，修改自定义组件中的多个样式，也只需要使用一次deep即可。
4.仅当你在 style标签中使用了 scoped属性时,/deep/属性才是有用的。
/*
希望对你有帮助！
如有错误，欢迎指正！
*/
--------------------------------------------------答疑-------------------------------------------------------------------------
1.关于 ahaohaoo 提到的： 如果你的style标签中没有scoped属性，那么使用 /deep/选择器定义的任何样式都是无效的 --------------这句话是错的
写的太久了，我也忘记了，刚测试了一下，结果如下：没有scoped时，深度选择器确实不生效(f12检查都找不到设置的样式）。无论style是 css还是sass。
例如：给button中文字设置颜色为 红色
注：虽然样式使用了 :deep(xxx)，但是 /deep/也是同理的，它们都是深度选择器。/deep/也已经测试过了，结果一样，感兴趣的读者，可以自行尝试。
