Vue项目中CSS样式设置了scoped后,部分属性失效 解决方案
Vue项目中,子组件的样式设置了scoped之后,一些CSS样式会失效。原因: 使用 scoped 后,父组件的样式将不会渗透到子组件中。但是一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。解决方案:使用深度作用选择器,即 >>> 操作符,或使用 /deep/ 或 ::v-deep 操作符,后两者都是 >>>
·
Vue项目中,子组件的样式设置了scoped之后,一些CSS样式会失效。
原因: 使用 scoped 后,父组件的样式将不会渗透到子组件中。但是一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
解决方案:
使用深度作用选择器,即 >>>
操作符,或使用 /deep/
或 ::v-deep
操作符,后两者都是 >>>
的别名,三者效果一样。
例如:
.my_order_box >>> .el-table .cell {
text-align: center;
}
.my_order_box >>> .el-table tr td:nth-child(4) .cell {
text-align: left;
}
或者
.my_order_box /deep/ .el-table .cell {
text-align: center;
}
.my_order_box /deep/ .el-table tr td:nth-child(4) .cell {
text-align: left;
}
更多推荐
已为社区贡献12条内容
所有评论(0)