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

2024-02-23 0 455

通常在引入第三方 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样式穿透内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 CSS CSS使用样式穿透的多种方法 https://www.u-9.cn/sheji/css/172819.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务