样式穿透用法以及原理

用法

普通的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修饰符

1. 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性[data-v-xxxxxx]
2. 给<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上，样式成功作用在子组件上。