使用scss语法后层级太多样式不生效的问题
<style scoped lang="scss">
.yndl-form{
display: flex;
flex:1;
.yndl-item{
flex:0.5;
display:flex;
.el-form-item__label{/* 该选择器不生效 */
flex:0.3;
}
.el-form-item__content{/* 该选择器不生效 */
margin-left:0 !important;
flex:0.7;
}
}
}
.yndl-form >>> .el-form-item__label{
flex:0.3;
}
.yndl-form >>> .el-form-item__content{
margin-left:0 !important;
flex:0.7;
}
</style>
- 解决方案：使用深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符
参考文章：https://vue-loader.vuejs.org/zh/guide/scoped-css.html
