[前端] 深度选择器deep使用介绍(笔记)
参考文献
深度选择器
深度选择器deep使用说明
在 Vue 中,为了实现组件内部样式对组件外部元素的穿透覆盖,可以使用 CSS 的 deep 选择器(也称为 >>> 或 /deep/)或 v-deep 指令。然而,这两个方法在 Vue 3 中已经被废弃,推荐使用 ::v-deep 伪类选择器。
示例
<template><div class="my-component"><!-- ... --></div>
</template><style scoped lang="less">
.my-component {/deep/ .target-class { // 或者使用 &:deep(.target-class)color: red;}
}
</style>
/deep/ 或 &:deep() 选择器可以穿透组件的 scoped 属性,使得内部样式可以作用于组件外部的 .target-class 元素。这里的 & 符号代表当前的选择器,&:deep() 将 & 与 .target-class 结合,创建了一个穿透性的嵌套选择器。
::v-deep 与/deep/ 的区别
::v-deep 和 :deep() 在 Vue 2.x 和 Vue 3.x 中都是用来穿透组件的 scoped 样式隔离,允许组件内的样式影响到组件外部的元素。它们实际上是同一种概念的不同表示形式。以下是它们的区别和历史背景:
-
Vue 2.x:
在Vue 2.x中,Vue提供了两种语法来穿透scoped样式:
/deep/: 这是一个CSS伪类选择器,用于Vue 2.x中的单文件组件 (SFC) 中,它允许组件内部的样式穿透到外部元素。
>>>: 这是另一种写法,功能与/deep/相同,它也是Vue 2.x中的一个语法糖,用于CSS预处理器中,比如 Sass 或者 Less。 -
Vue 3.x:
Vue 3.x移除了/deep/和>>>选择器,因为它们在某些CSS预处理器中存在解析问题,并且不是标准的CSS语法。
::v-deep被引入作为Vue 3.x的替代方案,这是一个伪元素选择器,它解决了预处理器中的解析问题,并且更加符合 CSS 标准。
在Vue 3.x中,::v-deep仅限于在SFC的<style>标签内使用,它与Vue 2.x中的/deep/和>>>表达相同的功能。
多级深度使用示例
.parent :deep(.child-class) {}
相关文章:
[前端] 深度选择器deep使用介绍(笔记)
参考文献 深度选择器 深度选择器deep使用说明 在 Vue 中,为了实现组件内部样式对组件外部元素的穿透覆盖,可以使用 CSS 的 deep 选择器(也称为 >>> 或 /deep/)或 v-deep 指令。然而,这两个方法在 Vue 3 中…...
simlink 初步了解
1.simlink概要 Simulink是基于MATLAB的框图设计环境,它提供了一个动态系统建模、仿真和分析的集成环境。Simulink是一个模块图环境,用于多域仿真以及基于模型的设计。它支持系统设计、仿真、自动代码生成以及嵌入式系统的连续测试和验证。 Simulink的特…...
【SRC实战】退款导致零元购支付漏洞
挖个洞先 https://mp.weixin.qq.com/s/3k3OCC5mwI5t9ILNt6Q8bw “ 以下漏洞均为实验靶场,如有雷同,纯属巧合 ” 01 — 漏洞证明 1、购买年卡会员 2、订单处查看已支付 3、申请退款 4、会员仍然有效 5、使用另一个账号重复支付退款操作&#…...
一篇文章搞懂退火算法
退火算法,全称为模拟退火算法(Simulated Annealing,SA),是一种通用概率算法,用来在给定一个大的搜寻空间内找寻问题的近似最优解。模拟退火算法灵感来源于固体物理学中的退火过程,这一过程中,物质被加热后再缓慢冷却,原子会在加热过程中获得较大的运动能量,随着温度的…...
浅说文心一言
文心一言(ERNIE Bot)是一个基于Transformer结构的知识增强大语言模型,它可以根据用户的指令和输入,生成相应的回答或文本。以下是一些常见的指令示例,你可以根据需要进行调整: 问答指令: "…...
IC设计企业如何实现安全便捷的芯片云桌面跨网摆渡?
IC设计企业,主要专注于集成电路的设计。这些企业通常包括集成电路、二极管、三极管和特殊电子元件等产品的设计和生产。IC设计企业在其运营和产品设计过程中,会涉及和产生多种文件,如: 项目需求文档:这是项目启动的基础…...
Hello, GPT-4o!
2024年5月13日,OpenAI 在官网正式发布了最新的旗舰模型 GPT-4o 它是一个 多模态模型,可以实时推理音频、视频和文本。 * 发布会完整版视频回顾:https://www.youtube.com/watch?vDQacCB9tDaw GPT-4o(“o”代表“omni”,…...
colab使用本地数据集微调llama3-8b模型
在Google的Colab上面采用unsloth,trl等库,训练数据集来自Google的云端硬盘,微调llama3-8b模型,进行推理验证模型的微调效果。 保存模型到Google的云端硬盘可以下载到本地供其它使用。 准备工作:将训练数据集上传到google的云端硬盘…...
YOLO数据集制作(二)|json文件转txt验证
以下教程用于验证转成YOLO使用的txt格式,适用场景:矩形框,配合json格式文件转成YOLO使用的txt格式脚本使用。 https://blog.csdn.net/StopAndGoyyy/article/details/138681454 使用方式:将img_path和label_path分别填入对应的图…...
linux常用命令(持续更新)
1.sudo -i 切换root权限 2. ll 和 ls 查看文件夹下面的文件 3. cat 查看文件内容 cat xxx.txt |grep 好 筛选出有好的内容 4. vi 编辑文件 点击insert进入编辑模式 编辑完之后点击Esc退出编辑模式 数据:wq!回车保存文件 5. ssh 连接到可以访问的系统 6. telnet 看端口是否可以…...
Excel表格导入/导出数据工具类
Excel表格导入/导出数据工具 这里以java语言为类,实现一个简单且较通用的Excel表格数据导入工具类。 自定义注解 ExcelColumn写导入工具类 ExcelImportUtil 自定义注解 ExcelColumn Retention(RetentionPolicy.RUNTIME) Target({java.lang.annotation.ElementTy…...
Python自学之路--004:Python使用注意点(原始字符串‘r’\字符转换\‘wb’与‘w区别’\‘\‘与‘\\’区别)
目录 1、原始字符串‘r’ 2、字符转换问题 3、open与write函数’wb’与’w’区分 4、Python里面\与\\的区别 1、原始字符串‘r’ 以前的脚本通过Python2.7写的,通过Python3.12去编译发现不通用了,其实也是从一个初学者的角度去看待这些问题。 其中的\…...
javaEE进阶——SpringBoot与SpringMVC第一讲
文章目录 什么是springMVCSpringMVC什么是模型、视图、控制器MVC和SpringMVC的关系SpringMVC的使用第一个SpringMVC程序RestController什么是注解 那么RestController到底是干嘛的呢?RequestMapping 如何接收来自请求中的querystryingRequestParamRequestMapping(&q…...
LabVIEW和usrp连接实现ofdm通信系统 如何实现
1. 硬件准备 USRP设备:选择合适的USRP硬件(如USRP B210或N210),并确保其与计算机连接(通常通过USB或以太网)。天线:根据频段需求选择合适的天线。 2. 软件安装 LabVIEW:安装LabVI…...
NGINX SPRING HTTPS证书
服务器:xxx.xxx.xxx.56 客户端器:xxx.xxx.xxx.94##生成服务器证书和密钥容器 keytool -genkey -alias tas-server -keypass 250250 -keyalg RSA -keysize 2048 -validity 3650 -keystore D:\https证书\tas-server.jks -storepass 250250 -dname "C…...
WordPress插件Plus WebP,可将jpg、png、bmp、gif图片转为WebP
现在很多浏览器和CDN都支持WebP格式的图片了,不过我们以前的WordPress网站使用的图片都是jpg、png、bmp、gif,那么应该如何将它们转换为WebP格式的图片呢?推荐安装这款Plus WebP插件,可以将上传到媒体库的图片转为WebP格式图片&am…...
GitLab CI/CD的原理及应用详解(五)
本系列文章简介: 在当今快速变化的软件开发环境中,持续集成(Continuous Integration, CI)和持续交付(Continuous Delivery, CD)已经成为提高软件开发效率、确保代码质量以及快速响应市场需求的重要手段。Gi…...
连锁收银系统如何助力实体门店私域运营
作为实体门店,私域运营是提升客户黏性和增加复购率的重要策略之一。而连锁收银系统在私域运营中扮演了关键的角色,它不仅可以帮助门店管理客户信息和消费记录,还能够通过数据分析和营销功能提供个性化的服务和推广活动。下面看看连锁收银系统…...
JETBRAINS IDES 分享一个2099通用试用码!PhpStorm 2024 版 ,支持一键升级
文章目录 废话不多说上教程:(动画教程 图文教程)一、动画教程激活 与 升级(至最新版本) 二、图文教程 (推荐)Stage 1.下载安装 toolbox-app(全家桶管理工具)Stage 2 : 下…...
超级好用的C++实用库之MD5信息摘要算法
💡 需要该C实用库源码的大佬们,可搜索微信公众号“希望睿智”。添加关注后,输入消息“超级好用的C实用库”,即可获得源码的下载链接。 概述 MD5信息摘要算法是一种广泛使用的密码散列函数,由Ronald L. Rivest在1991年设…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要: 近期,在使用较新版本的OpenSSH客户端连接老旧SSH服务器时,会遇到 "no matching key exchange method found", "n…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...
