文章目录
- 一、前言
- 1.1、`/deep/`
- 1.2、`::v-deep`
- 1.3、`>>>`
- 二、区别
- 三、总结
- 四、最后
一、前言
1.1、/deep/
在style
经常用scoped
属性实现组件的私有化时,要改变element-ui
某个深层元素(例如.el-input__inner
)或其他深层样式时,需要使用/deep/
,如:
.conBox /deep/ .el-input__inner{
padding:0 10px;
}
注意,
/deep/
在vue 3.0
会报错
1.2、::v-deep
如果/deep/
报错,可采用::v-deep
,效果基本一样,有人说::v-deep
能加快编译速度,但是我在网上没有找到相关资料,无从验证。
.conBox ::v-deep .el-input__inner{
padding:0 10px;
}
1.3、>>>
深度作用选择器 >>>
,只作用于css
但如果是sass/less
的话可能无法识别,这时候需要使用 /deep/
和::v-deep
选择器。
想修改element-ui
某个深层元素也有其他方式解决;
解决方法之一:除非你将 scoped
移除,或者新建一个没有 scoped
的 style
(一个.vue
文件允许多个style
)
二、区别
>>>
:原生css
支持,sass/less
的话可能无法识别
/deep/
:sass/less
可识别,/deep/
在vue 3.0
会报错 (未实际考察,有待验证)
::v-deep
:vue 3.0
支持,编译速度快 (未实际考察,有待验证)
三、总结
个人推荐vue + element-ui
项目使用::v-deep
修改样式
四、最后
本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕