一、使用场景🌊
::: tip
在编写Vue组件时，我们通常希望一些样式只作用于这一个组件，而不影响全局，此时只需要在style标签后加上一个scoped就可以了，但它是怎么做到的呢？
当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
如果你善于观察，应该会发现，渲染后的dom元素上有很多 data-v-xxxxx 这样的标识，其实这就是秘密所在.
:::
二、实现原理🌊
scoped属性的效果主要是通过PostCss实现的
- 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，
data-v-xxxx- 给
<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]
三、关于样式穿透🌊
为什么需要样式穿透
在实际开发过程中，我们常常用到一些第三方的组件库,当需要修改这些组件的默认样式，又不想去除scoped污染全局时，就可以使用样式穿透
样式穿透的用法
1. >>>
如果项目使用css原生样式，那么可以直接使用
>>>
.container >>> .el-table {
...
}
2. /deep/
项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
注意：vue-cli3以上版本不可以
.container /deep/ .el-table {
...
}
3. ::v-deep
.container ::v-deep .el-table {
...
}
样式穿透的原理
用了样式穿透后，在deep之后的选择器最后就不会再加上标识。
