Scoped Css
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它通过使用 PostCSS 来实现以下转换：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
转换结果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
由转换结果可见，每一个类名都加上了 hash 值，使样式只作用于当前组件。
修改 element-ui 默认样式
混用本地和全局样式
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
抽取到全局 css 文件
在全局 css 文件中重写覆盖的样式，为了不污染全局样式，可以加个单独的类名
深度作用选择器
这是 vue-loader 提供的一种写法，如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
<style scoped lang="scss">
.form {
background-color: #fff;
/deep/ .list{
font-size: 18px;
}
}
</style>
