Vue中的深度作用选择器/deep/

在我们使用Vue搭建项目的时候，我们经常会用到一些UI框架，如Element，iView，但是有时候我们又想去修改UI框架的样式，当我们修改样式失败的时候，可以尝试一下/deep/，亲测有效。

那失败的原因是什么呢？
UI框架的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）。

有多种解决方法，推荐使用/deep/。

当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。
有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。

用法如下：

/deep/ .sg-select-selection {
      border: 1px solid #0095fe;
      background: none;
      .sg-select-selected-value {
        color: #fff;
      }
      > .iconfont {
        color: #0095fe;
      }
    }

也可以写成这种形式：

>>> .sg-select-selection {
      border: 1px solid #0095fe;
      background: none;
      .sg-select-selected-value {
        color: #fff;
      }
      > .iconfont {
        color: #0095fe;
      }
    }

它会解析为：

[data-v-f3f3eg9] .sg-select-selection{
      border: 1px solid #0095fe;
      background: none;
      .sg-select-selected-value {
        color: #fff;
      }
      > .iconfont {
        color: #0095fe;
      }
}