css样式的作用域scoped
scoped 属性是 HTML5 中的新属性。在Vue.js的组件化开发中，常常会对某个组件的style标签加上scoped属性，当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前组件的元素，这样就可以使得组件之间的样式不互相污染。
原理就是打包工具会在打包时会把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名并且为添加了scoped的style中的样式选择器上添加一个属性选择器。如果一个项目中的所有style标签全部加上了scoped，相当于实现了组件的私有化，样式的模块化。
<style scoped>
.text {
color: red;
}
</style>
<template>
<div class="text">hello world</div>
</template>
打包工具编译之后
css样式的选择器上添加一个属性选择器：
<style>
.text[data-v-f3f3eg9] {
color: red;
}
</style>
<div class="text" data-v-f3f3eg9>hi</div>
style标签拥有scoped属性时，组件之间的样式是相互独立的，即父组件不能使用子组件的样式，子组件也不能使用父组件的样式。如果不加scoped， 所有的组件都可以使用，称之为全局样式。
子组件根元素
style标签加上scoped属性时，父组件的样式不会泄漏到子组件中。但是，子组件的根节点即受父级作用域CSS也受子级作用域CSS的影响。也就是说父组件可以设置子组件根元素的样式，但是父组件的CSS的作用域样式不能作用在子组件根元素下的后代元素。
混合样式
可以在同一组件中使用多个style标签
<style>
</style>
<style scoped>
</style>
样式穿透
-
使用样式穿透的原因：
- 为了不污染全局样式，我们在style上加一个scoped修饰符，打包工具在打包时会把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名并且为添加了scoped的style中的样式选择器上添加一个属性选择器，这样只有拥有这个属性的元素才会应用此样式，这样就会导致引入element-ui时需要更改某些元素的样式，但使用常规的css样式覆盖的方式是无效的。
-
样式穿透就是在父级组件中强制去修改子级组件的内部样式，注意这里的父子层次并不一定是一级，可能是很多级，也就是父组件要修改子组件根元素下的后代元素的样式。
-
样式穿透的3种方式
- css语法: 在要修改的样式前添加>>>符号
- sass语法: 在要修改的样式前添加 ::v-deep
- sass语法/less语法 : 在要修改的样式前添加 /deep/
//css语法: 在要修改的样式前添加 >>> 符号
.wrapper >>> .el-card__header{
border:none;
}
//sass语法: 在要修改的样式前添加 ::v-deep
::v-deep .el-card__header{
border:none;
}
//sass语法/less语法：在要修改的样式前添加 /deep/
.wrap /deep/ .el-card__header{
border:none;
}
