本文给大家分享CSS样式穿透的几种方法,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
通常在引入第三方 UI 组件库(如 element-ui或者easyUI等等),需要自定义组件样式时,但由于样式使用了 scoped 属性(为避免组件之间的样式相互影响),导致无法直接覆盖原组件的样式,这时就需要用到样式穿透。
CSS使用样式穿透的方法有以下几种:
1、使用 >>>
符号:
.container >>> .el-input__inner { width: 160px; }
该方法适用的样式语法:css、stylus
2、使用 /deep/
:
.container /deep/ .el-input__inner { width: 160px; }
该方法适用的样式语法:sass、scss、less
3、使用 ::v-deep
:
::v-deep .el-input__inner { width: 160px; }
该方法对所有样式语法通用,即适用于 css、stylus、sass、scss 和 less
其中/deep/
和 ::v-deep
属于深度选择器。
到此这篇关于CSS样式穿透的几种方法的文章就介绍到这了,更多相关CSS样式穿透内容请搜索0133技术站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持0133技术站!
以上就是CSS使用样式穿透的多种方法的详细内容,更多请关注0133技术站其它相关文章!