css样式穿透（深度选择器）

1、什么情况下使用样式穿透

引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式
样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除

2、样式穿透的三种办法

1. >>>

适用与 css、stylus，不太推荐，可能会有问题
外层类 /deep/ 想要修改类名 {
修改样式
}

2. /deep/

适用于 scss、less
外层类 >>> 想要修改类名 {
修改样式
}

3. ::v-deep

通用，据说可以加快编译速度
::deep 想要修改类名 {
修改样式
}

使用样式穿透还是无效

有时会发现使用了以上方法修改 element 组件样式还是会不生效，
首先打开浏览器控制台的 elements 里面的页面代码，你会发现

el-popper 是在页面的根文件下，而非组件中
这些组件有：

 <el-popconfirm>  <el-date-picker>  <el-popover>

页面代码：

                    <el-popconfirmpopper-class="popperStyle2":icon="Warning"icon-color="#4C9FFF"title="确认删除？"@confirm="delPerson(scope.row.id)">

样式代码：

<style lang="scss" scope>
// el-popover
.popperStyle1 {&.el-popper.is-light {background: $bg-color;border: $input-border;}&.el-popper[data-popper-placement^=right] .el-popper__arrow::before {border: $input-border;background: $bg-color;}
}
</style>

查看页面效果还是没有生效，去掉 scoped

最终写法是这样, .el-popover.my-popover 这种格式，前缀是.el-popover ，不然不生效。且不能加上scoped

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦