查看: 13|回复: 0

CSS使用样式穿透的多种方法

[复制链接]

0

主题

0

回帖

0

积分

积极分子

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2011-1-18
发表于 昨天 22:16 | 显示全部楼层 |阅读模式

通常在引入第三方 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 属于深度选择器

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部