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

发布时间:2024年01月22日


一、前言

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://blog.csdn.net/u012804440/article/details/135724417
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。