用法
普通的css语法: 在要修改的样式前添加 >>> 符号
.demo >>> .el-table{
border: none;
}
scss语法: 在要修改的样式前添加 ::v-deep
::v-deep .el-table{
border:none;
}
sass语法/less语法 : 在要修改的样式前添加 /deep/
.demo /deep/ .el-table{
border:none;
}
scoped原理
当一个style标签拥有scoped属性时，表明css样式只在该组件中生效，使用该修饰符会给dom生成唯一标识[data-v-xxxxxx]，可避免全局污染。
scoped修饰符
- 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性[data-v-xxxxxx]
- 给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxxxx]
样式穿透原理##
用了样式穿透后，被穿透的dom不会再加上唯一标识[data-v-xxxxxx]，不添加/deep/，样式会作用在 .box[data-v-888888888] .son[data-v-88888888]上，由于没有这个节点所以失败。添加/deep/，样式会作用在 .box[data-v-888888888] .son上，样式成功作用在子组件上。
