业务场景： Vue + Element UI的项目

     我们在很多情况下都需要完整适配UI图且不影响UI框架主样式的情况下去修改Element（其他UI框架）的样式

这种情况下一般是需要做CSS的样式隔离

    样式隔离一共有两种方法

     1. 使用CSS的deep规范来对UI组件的样式进行修改

           deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存在着一个问题，比如你使用了别人的组件或者自己开发一个组件，有时候你修改一处就可能影响到别的地方，这个时候要么你不用别人的组件，自己重新封装一个，但很多时候是不太现实的，所以就需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。

     而且deep 规范有兼容性问题，只能在主流浏览器下使用（部分浏览器下不生效）

     写法

.container /deep/ .container-title {
　　height: 10px;
　　line-height: 10px;
　　min-height: 10px;
　　background: #fff;
　　border-bottom: solid 1px #F2F2F2;
}

    2. 在组件内部再加一个不含scoped的style标签，通过外层组件添加唯一class来区分组件，修改各种第三方组件的样式。（这种情况适配比较高且没有兼容性问题）

     写法（使用方法）

<div class="container">
    <element组件 class="container-title"></element组件>
</div>

<style style="less">
    .container {
        .container-title {
            // 自定义的样式
        }
    }
</style>