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

文章目录

  • 一、前言
    • 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修改样式

四、最后

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JOSEF约瑟 大容量中间继电器 RXMH2 RK223 067 DC220V 带底座

系列型号 RXMH2 RK 223 067大容量中间继电器; RXMH2 RK 223 068大容量中间继电器; RXMH2 RK 223 069大容量中间继电器; RXMH2 RK 223 070大容量中间继电器; 一、用途 RXMH2系列大容量中间继电器用于工业自动化控制及电力系统二次…

app重新签名之后,teamID会改变吗?

哈喽大家好,我是咕噜美乐蒂,很高兴又见面啦! 在iOS和macOS开发中,我们经常需要对应用进行重新签名,以便在发布或测试时更改应用的证书或代理。在重新签名应用程序时,可能会出现teamID变化的情况。本文将探…

冷知识:COS上传文件时可以同步获取文件信息

背景介绍 本文将介绍如何在上传文件到 COS 时同步获取文件信息,如图片的宽高、格式等。 目前,可以通过 COS 上传接口,如 PUT Object、CompleteMultipartUploads 等将文件存储至 COS 存储桶中,我们针对以下三种场景提供上传时同步…

Windows主机Navicat远程连接到Ubuntu18.04虚拟机MySQL

1. 在虚拟机上安装MySQL sudo apt-get install mysql-server sudo apt-get install libmysqlclient-dev 2. 检查安装 sudo netstat -tap | grep mysql 3. 查看默认密码 sudo cat /etc/mysql/debian.cnf 4. 用查看到的密码登录MySQL server,修改root用户的密码 …

javaWebssh宠物基地管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh宠物基地管理系统是一套完善的web设计系统(系统采用ssh框架进行设计开发),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用 B/S模式开发。开发环境为TOMCAT7.…

PostgreSQL插件说明

PostgreSQL插件是一种扩展PostgreSQL功能的程序。社区版插件管理需要超级用户权限,而华为公有云PostgreSQL提供了一种简单易用的插件管理方案,可以在数据库中创建、更新和删除插件,无需超级用户权限。它不仅可以增加特定的数据类型、函数、操…

JS进阶-内置构造函数(二)

小提示:这些内置函数在开发使用的频率非常的频繁,建议认真看一下,并背一下 目录 知识回顾: • Object 三个常用静态方法(静态方法就是只有构造函数Object可以调用的) Object.keys Object.values Obj…

brpc负载均衡load balance和服务发现name servicing

1.SharedLoadBalancer(load_balancer.h):包含LoadBalancer指针_lb,AddServersInBatch 2.LoadBalancerWithNaming:继承SharedLoadBalancer和NamingServiceWatcher 2.1Init函数:SharedLoadBalancer::Init&a…

梯度的计算

文章目录 import torch as tc# 以函数f(x) x^2 为例子,求梯度 x1 tc.tensor(1,dtypetc.float64,requires_gradTrue) g1 tc.autograd.grad(x1**2,x1)[0] print(f"The grad of x**2 at {x1} is {g1}")(x1 ** 2).backward() print(f"The grad of x*…

四、MySQL之增删改

一、插入数据 1.1、VALUES的方式添加 使用这种语法一次只能向表中插入一条数据。 1.1.1、为表的所有字段按默认顺序插入数据 INSERT INTO 表名 VALUES (value1,value2,....);// 值列表中需要为表的每一个字段指定值,并且值的顺序必须和数据表中字段定义时的顺序相…

浅谈WPF之UI布局

一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处…

AWS 云监控工具

Amazon Web Services(AWS)是 Amazon 提供的云计算平台,为企业提供技术服务,包括计算能力、存储和数据库。借助 AWS,企业无需购买、拥有或维护物理数据中心和服务器,而 AWS 的即用即付方法使企业能够避免与 …

vcruntime140.dll找不到的多种解决方法分享,修复vcruntime140.dll文件

当操作电脑软件的过程中弹出一个错误提示“vcruntime140.dll已加载,但找不到入口点”,这通常意味着程序所依赖的vcruntime140.dll文件可能已经丢失、遭到破坏,或者该文件的路径及位置在软件开发时未被正确配置。此外,这种情况还有可能是因为电…

Windows11 Copilot助手开启教程(免费GPT-4)

Windows11上开启Copilot助手教程踩坑指南 Copilot介绍Copilot开启步骤1、更新系统2、更改语言和区域3、下载 ViVeTool 工具4、开启Copilot 使用 Copilot介绍 Windows Copilot 是 Windows 11 中的一个新功能,它可以让你与一个智能助理进行对话,获取信息&…

应用协议漏洞

应用协议漏洞 一、rsync rsync是Linux下一款数据备份工具,支持通过rsync协议、ssh协议进行远程文件传输。其中rsync协议默认监听873端口 1.未授权访问 打开靶场 判断漏洞是否存在 rsync rsync://目标ip:端口读取文件 rsync rsync://47.99.49.128:873/src/tmp/下…

2024年的Rust与Go,你看明白了吗?

Rust和Go哪个更好?你应该为下一个项目选择哪种语言,为什么?两者在性能、简单性、安全性、功能特性、规模化(scale)和并发性等方面如何比较?它们有什么共同点,又有什么根本区别?让我们通过Rust和Go的友好且公…

浏览器打开本地应用和程序制作安装包

1、引言 最近使用python开发一款windows应用,有一个需求是从浏览器打开本地应用。从网上查到可以通过注册表的方法完成需求。所以就需要往注册表写内容。因此应用需要在安装的时候写注册表。 2、安装包制作工具:NSISVNISEdit NSIS可以制作安装包&…

JVM内存问题排查

本文又名《对JVM一窍不通的我快速开始排查应用内存问题》。主要系统性地整理了排查思路,为大家遇到问题时提供全面的排查流程,不至于漏掉某些可能性误入歧途浪费时间。 基本原则 由于本文的定位是Cookbook,基本原则是让整个流程能够系统化规范化的同时将…

Nodejs一键发布脚本

背景 前端项目或者nodejs项目分开发、测试、生产环境,有的没有没有接入 jenkins。每次都需要进行本地打包, 手动压缩上传到服务器目录,ssh 登录服务器后备份旧文件, 手动删除文件再将包解压到指定目录,操作流程比较繁琐,需要提前…

Vue2学习之第六、七章——vue-router与ElementUI组件库

路由 理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。前端路由:key是路径,value是组件。 1.基本使用 安装vue-…