首页 前端知识 css中>>>、/deep/、::v-deep的作用和区别,element-ui自定义样式

css中>>>、/deep/、::v-deep的作用和区别,element-ui自定义样式

2024-06-10 23:06:45 前端知识 前端哥 794 352 我要收藏

文章目录

  • 一、前言
    • 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 移除,或者新建一个没有 scopedstyle(一个.vue文件允许多个style

二、区别

>>>:原生css支持,sass/less的话可能无法识别
/deep/sass/less可识别,/deep/vue 3.0会报错 (未实际考察,有待验证)
::v-deepvue 3.0支持,编译速度快 (未实际考察,有待验证)

三、总结

个人推荐vue + element-ui项目使用::v-deep修改样式

四、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11855.html
标签
v-deep/deep/
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!