之前在开发中遇到一个问题，vue项目结合 element ui 使用。
但是 element ui 的样式不一定符合我们的需求，这时我们就需要改变它的样式。
比如博主使用到了element ui 的对话框，我想要改变这个对话框标题的颜色，所以我需要在页面中审查元素找到对应的标签。
但是当我找到并且复制，然后试图去改变它的样式时，怎么都没办法改变。
我以为是权重的问题，所以我加 ! important，但是也毫无作用。
当我审查元素发现此样式就没有作用到，就相当于它没有找到这个元素，所以也就不存在改不改变样式的问题了。
这时我们就需要一个选择器能深度的帮助我们找到这个元素，比如 deep
vue组件中，在 style 设置为 scoped 的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。
这是我起初试图改变的方法（亲测无效）：
.focus .el-dialog__title{
color:red !important
}
这是使用deep后的方法（亲测有效）：
.focus /deep/ .el-dialog__title{
color:red;
}
原理就是通过找到父元素深度的找到我们需要改变的子元素，然后改变它的样式即可。
若/deep/后有多层嵌套：
/* 渲染前 */
#app /deep/ button{
background-color: yellow;
span{
color:blue;
}
}
/* 渲染后 样式有效 */
#app[data-v-7ba5bd90] button span {
color: blue;
}
再换种写法 移动/deep/位置：
/* 渲染前 */
#app button{
/deep/ span{
color:pink;
}
}
/* 渲染后 data-v-7ba5bd90是#app的属性 所以无效 */
#app button[data-v-7ba5bd90] span {
color: pink;
}
再换一种 又加个子元素：
/* 渲染前 */
#app button{
span{
/deep/ span{
color:pink
}
}
}
/* 渲染后 */
#app button span[data-v-7ba5bd90] span {
color: pink;
}
综上可以看出.在哪里加的/deep/ ,data属性选择器就会跑到写的上一层去.
若写多个/deep/：
多个/deep/的情况下，只有最外层的/deep/有效，内层的其他/deep/都是无效的，写了也没意义，不建议写。
.
