/deep/ 深度作用选择器作用及使用

之前在开发中遇到一个问题，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/都是无效的，写了也没意义，不建议写。

.