css深度选择器>>>、/deep/ 、::v-deep 、:deep()

很多vue的组件库 , 如vant,elementUI, iview等都可能自定义样式。
如项目中用到了 elementui,如果使用预处理器 scss, sass,less , 修改样式可能修改不掉, 而且这种需求出现的频率非常高。但如果去掉scoped话又会影响全局样式。当然我们知道可以使用 样式穿透的方式操作。

那么究竟什么时候使用 >>> 什么时候使用 /deep/ 和 ::v-deep 实际操作中会有什么问题呢?

1、>>>
如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

<style scoped>
/*编译前*/
.a >>> .b { /* ... */
}/*编译后*/
.a[data-v-f3f3eg9] .b { /* ... */ }
</style>

>>>只作用于css的深度选择器,对于less和scss之类的预处理器不起作用,如果是less和scss的话需要用到/deep/::v-deep
2、/deep/::v-deep

<style lang="less" scoped>/deep/ .el-button {span {color: '#25t'}}.el-button ::v-deep {span{color: '#f44'}}
</style>

3、:deep()
vue3中采用:deep()

总结:

  • 操作符 >>> 只适合css 原生样式,对于less和scss之类的预处理器不起作用
  • 对于使用了 css 预处理器(scss 、sass、 less)时, ::v-deep 比较通用
  • vue3废弃 >>>::v-deep/deep/,采用:deep()

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

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

相关文章

设计模式之美学习笔记-理论篇1-面向对象的特性

一、设计模式前言 面向对象 主流的编程范式或者是编程风格有三种&#xff0c;它们分别是面向过程、面向对象和函数式编程。面向对象这种编程风格又是这其中最主流的。现在比较流行的编程语言大部分都是面向对象编程语言。大部分项目也都是基于面向对象编程风格开发的。面向对…

中职组网络安全-FTPServer20221010.img(环境+解析)

任务环境说明&#xff1a; √服务器场景&#xff1a;FTPServer20221010.img √服务器操作系统&#xff1a;未知&#xff08;关闭链接&#xff09; √FTP用户名&#xff1a;attack817 密码&#xff1a;attack817 1.分析attack.pcapng数据包文件&#xff0c;通过分析数据包attack…

elasticsearch聚合、自动补全、数据同步

目录 一、数据聚合1.1 聚合的种类1.2 DSL实现聚合1.2.1 Bucket聚合语法1.2.2 聚合结果排序1.2.3 限定聚合范围1.2.4 Metric聚合语法 1.3 RestAPI实现聚合 二、自动补全2.1 拼音分词器2.2 自定义分词器2.3 自动补全查询2.4 RestAPI实现自动补全 三、数据同步3.1 思路分析3.1.1 同…

哈希表Leetcode 1657. 确定两个字符串是否接近

如果可以使用以下操作从一个字符串得到另一个字符串&#xff0c;则认为两个字符串 接近 &#xff1a; 操作 1&#xff1a;交换任意两个 现有 字符。 例如&#xff0c;abcde -> aecdb操作 2&#xff1a;将一个 现有 字符的每次出现转换为另一个 现有 字符&#xff0c;并对另…

PCP的Parallel Repetition

1. 引言 见Alessandro Chiesa等人2023年论文《On Parallel Repetition of PCPs》。 Parallel Repetition&#xff08;并行重复&#xff09;可用于&#xff1a; 降低probabilistic proofs的soundness error 的同时提升某些衡量指标的效率 interactive proofs&#xff08;IPs…

模型层——多表操作

多表操作 一 创建模型 实例&#xff1a;我们来假定下面这些概念&#xff0c;字段和关系 作者模型&#xff1a;一个作者有姓名和年龄。 作者详细模型&#xff1a;把作者的详情放到详情表&#xff0c;包含生日&#xff0c;手机号&#xff0c;家庭住址等信息。作者详情模型和作…

YOLOv5全网独家首发改进:SENetv2,Squeeze-Excitation模块融合Dense Layer,效果秒杀SENet

💡💡💡本文自研创新改进:SENet v2,针对SENet主要优化点,提出新颖的多分支Dense Layer,并与Squeeze-Excitation网络模块高效融合,融合增强了网络捕获通道模式和全局知识的能力 推荐指数:五星 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/catego…

项目申请书撰写【笔记】

撰写项目申请书需要良好的科技写作技能。好的项目申请书应该条理清 晰、逻辑严密。整份申请 书要有清晰的结构&#xff0c;每部分都有特定的功能&#xff0c;让项目评审人觉得一目了 然。每一段话也要有特定的功能&#xff0c;表达要有层次和递进。要注意起承转合、文脉通畅&am…

【24押题卷】小马哥终极押题3+1!

告别11月&#xff0c;迎接12月&#xff01;说来也是缘分&#xff0c;各平台发了快200套真题&#xff0c;梳理了6本教材课后习题&#xff0c;讲解了吴大正、郑君里、奥本三本重点习题。终于我“悟了”&#xff0c;你们会发现&#xff0c;我今年做的每一套真题解析&#xff0c;几…

Linux Ubuntu protobuf 安装方法

文章目录 安装方法检验安装意外状况 安装方法 去GitHub官网找下载地址 安装 protobuf 21.11 GitHub 资源地址 选择安装版本 &#xff08;是一个URL网址&#xff09; 例如这里选用&#xff1a;protobuf-all-21.11.zip 资源 安装依赖库&#xff0c;执行指令 6. sudo apt-get …

【Node.js】笔记整理4 - 版本管理工具nvm

写在最前&#xff1a;跟着视频学习只是为了在新手期快速入门。想要学习全面、进阶的知识&#xff0c;需要格外注重实战和官方技术文档&#xff0c;文档建议作为手册使用 系列文章 【Node.js】笔记整理 1 - 基础知识【Node.js】笔记整理 2 - 常用模块【Node.js】笔记整理 3 - n…

毕业项目分享

大家好&#xff0c;今天给大家分享112个有趣的Python实战项目&#xff0c;可以直接拿来实战练习&#xff0c;涵盖机器学习、爬虫、数据分析、数据可视化、大数据等内容&#xff0c;建议关注、收藏。 项目名称 主要技术 2023招聘数据分析可视化系统爬虫 7种薪资预测模型 Flas…

【JAVA面向对象编程】--- 探索子类如何继承父类

&#x1f308;个人主页: Aileen_0v0&#x1f525;学习专栏: Java学习系列专栏 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 继承 继承的普通成员方法调用 及 普通成员变量修改 构造方法的调用 子类构造方法 继承 package Inherit;class Animal …

如何制作一个数字人?流程是怎样的?

​​虚拟人概念从早期动漫领域的初音未来用一首《甩葱歌》让绿色双马尾的“歌姬”形象火出圈&#xff0c;到洛天依登上央视春晚舞台&#xff0c;再到众多虚拟歌手、虚拟主播、KOL、代言人等活跃于各种情境中。 去年以来&#xff0c;元宇宙和虚拟人技术进入全球科技产业的聚光灯…

笔记二十二、使用路由state进行传递参数

22.1 父组件设置state路由参数 <NavLink toclassify state{{param_C: this.state.name, param_D: this.state.age}} className{this.activeStyle}>classify</NavLink> 父组件 Home/index.jsx import React from "react"; import {NavLink, Outlet} from…

Day46力扣打卡

最近一直在做以前的题&#xff0c;刷题量都没有怎么增长&#xff0c;感觉自己算法一直不太行&#xff0c;但也只能菜就多练了。 打卡记录 由子序列构造的最长回文串的长度&#xff08;区间DP&#xff09; 链接 第二次刷这道题&#xff0c;相比上回思路来的很快&#xff0c;但…

IDEA maven无法下载源代码处理

1、使用idea内置maven 在idea中新增一个mvn运行项,截图如下: 输入命令: dependency:resolve -Dclassifiersources 2、如果外部maven&#xff0c;不使用idea内部maven 在工程目录下命令行执行命令: mvn dependency:resolve -Dclassifiersources

Golang实践录:读取xml配置文件

本文对 xml 文件进行解析。 概述 某项目涉及到数据传输&#xff0c;我负责运行在工控机的客户端。实际上&#xff0c;工控机已经有了作为“数据传输”角色的程序&#xff0c;已经 worked 了很多年&#xff0c;从工程较多处出现的func_<年份>来看&#xff0c;年龄不小于已…

Linux信号超详细剖析

预备知识&#xff1a; 一、信号产生(OS发给进程) 1、键盘组合键 Linux中&#xff0c;一次登录对应一个终端&#xff0c;bash/shell。且只允许一个进程是前台进程&#xff0c;默认就是bash/shell&#xff0c;其它都是后台进程。获取键盘输入的是前台进程。 Ctrlc: 向前台进程…

面试题:什么是负载均衡?常见的负载均衡策略有哪些?

文章目录 一、负载均衡二、负载均衡模型分类三、CDN负载均衡四、LVS负载均衡4.1 LVS 支持的三种模式4.1.1 DR 模式4.1.2 TUN 模式4.1.3 NAT 模式 4.2 LVS 基于 Netfilter 的框架实现 五、负载均衡策略是什么六、常用负载均衡策略图解6.1 轮询6.2 加权轮询6.3 最少连接数6.4 最快…