当前位置: 首页 > news >正文

[前端] 深度选择器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.xVue 3.x 中都是用来穿透组件的 scoped 样式隔离,允许组件内的样式影响到组件外部的元素。它们实际上是同一种概念的不同表示形式。以下是它们的区别和历史背景:

  1. Vue 2.x:
    Vue 2.x 中,Vue 提供了两种语法来穿透 scoped 样式:
    /deep/: 这是一个 CSS 伪类选择器,用于 Vue 2.x 中的单文件组件 (SFC) 中,它允许组件内部的样式穿透到外部元素。
    >>>: 这是另一种写法,功能与 /deep/ 相同,它也是 Vue 2.x 中的一个语法糖,用于 CSS 预处理器中,比如 Sass 或者 Less。

  2. 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 中&#xff0c;为了实现组件内部样式对组件外部元素的穿透覆盖&#xff0c;可以使用 CSS 的 deep 选择器&#xff08;也称为 >>> 或 /deep/&#xff09;或 v-deep 指令。然而&#xff0c;这两个方法在 Vue 3 中…...

simlink 初步了解

1.simlink概要 Simulink是基于MATLAB的框图设计环境&#xff0c;它提供了一个动态系统建模、仿真和分析的集成环境。Simulink是一个模块图环境&#xff0c;用于多域仿真以及基于模型的设计。它支持系统设计、仿真、自动代码生成以及嵌入式系统的连续测试和验证。 Simulink的特…...

【SRC实战】退款导致零元购支付漏洞

挖个洞先 https://mp.weixin.qq.com/s/3k3OCC5mwI5t9ILNt6Q8bw “ 以下漏洞均为实验靶场&#xff0c;如有雷同&#xff0c;纯属巧合 ” 01 — 漏洞证明 1、购买年卡会员 2、订单处查看已支付 3、申请退款 4、会员仍然有效 5、使用另一个账号重复支付退款操作&#…...

一篇文章搞懂退火算法

退火算法,全称为模拟退火算法(Simulated Annealing,SA),是一种通用概率算法,用来在给定一个大的搜寻空间内找寻问题的近似最优解。模拟退火算法灵感来源于固体物理学中的退火过程,这一过程中,物质被加热后再缓慢冷却,原子会在加热过程中获得较大的运动能量,随着温度的…...

浅说文心一言

文心一言&#xff08;ERNIE Bot&#xff09;是一个基于Transformer结构的知识增强大语言模型&#xff0c;它可以根据用户的指令和输入&#xff0c;生成相应的回答或文本。以下是一些常见的指令示例&#xff0c;你可以根据需要进行调整&#xff1a; 问答指令&#xff1a; "…...

IC设计企业如何实现安全便捷的芯片云桌面跨网摆渡?

IC设计企业&#xff0c;主要专注于集成电路的设计。这些企业通常包括集成电路、二极管、三极管和特殊电子元件等产品的设计和生产。IC设计企业在其运营和产品设计过程中&#xff0c;会涉及和产生多种文件&#xff0c;如&#xff1a; 项目需求文档&#xff1a;这是项目启动的基础…...

Hello, GPT-4o!

2024年5月13日&#xff0c;OpenAI 在官网正式发布了最新的旗舰模型 GPT-4o 它是一个 多模态模型&#xff0c;可以实时推理音频、视频和文本。 * 发布会完整版视频回顾&#xff1a;https://www.youtube.com/watch?vDQacCB9tDaw GPT-4o&#xff08;“o”代表“omni”&#xff0c…...

colab使用本地数据集微调llama3-8b模型

在Google的Colab上面采用unsloth,trl等库&#xff0c;训练数据集来自Google的云端硬盘&#xff0c;微调llama3-8b模型&#xff0c;进行推理验证模型的微调效果。 保存模型到Google的云端硬盘可以下载到本地供其它使用。 准备工作&#xff1a;将训练数据集上传到google的云端硬盘…...

YOLO数据集制作(二)|json文件转txt验证

以下教程用于验证转成YOLO使用的txt格式&#xff0c;适用场景&#xff1a;矩形框&#xff0c;配合json格式文件转成YOLO使用的txt格式脚本使用。 https://blog.csdn.net/StopAndGoyyy/article/details/138681454 使用方式&#xff1a;将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语言为类&#xff0c;实现一个简单且较通用的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写的&#xff0c;通过Python3.12去编译发现不通用了&#xff0c;其实也是从一个初学者的角度去看待这些问题。 其中的\…...

javaEE进阶——SpringBoot与SpringMVC第一讲

文章目录 什么是springMVCSpringMVC什么是模型、视图、控制器MVC和SpringMVC的关系SpringMVC的使用第一个SpringMVC程序RestController什么是注解 那么RestController到底是干嘛的呢&#xff1f;RequestMapping 如何接收来自请求中的querystryingRequestParamRequestMapping(&q…...

LabVIEW和usrp连接实现ofdm通信系统 如何实现

1. 硬件准备 USRP设备&#xff1a;选择合适的USRP硬件&#xff08;如USRP B210或N210&#xff09;&#xff0c;并确保其与计算机连接&#xff08;通常通过USB或以太网&#xff09;。天线&#xff1a;根据频段需求选择合适的天线。 2. 软件安装 LabVIEW&#xff1a;安装LabVI…...

NGINX SPRING HTTPS证书

服务器&#xff1a;xxx.xxx.xxx.56 客户端器&#xff1a;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格式的图片了&#xff0c;不过我们以前的WordPress网站使用的图片都是jpg、png、bmp、gif&#xff0c;那么应该如何将它们转换为WebP格式的图片呢&#xff1f;推荐安装这款Plus WebP插件&#xff0c;可以将上传到媒体库的图片转为WebP格式图片&am…...

GitLab CI/CD的原理及应用详解(五)

本系列文章简介&#xff1a; 在当今快速变化的软件开发环境中&#xff0c;持续集成&#xff08;Continuous Integration, CI&#xff09;和持续交付&#xff08;Continuous Delivery, CD&#xff09;已经成为提高软件开发效率、确保代码质量以及快速响应市场需求的重要手段。Gi…...

连锁收银系统如何助力实体门店私域运营

作为实体门店&#xff0c;私域运营是提升客户黏性和增加复购率的重要策略之一。而连锁收银系统在私域运营中扮演了关键的角色&#xff0c;它不仅可以帮助门店管理客户信息和消费记录&#xff0c;还能够通过数据分析和营销功能提供个性化的服务和推广活动。下面看看连锁收银系统…...

JETBRAINS IDES 分享一个2099通用试用码!PhpStorm 2024 版 ,支持一键升级

文章目录 废话不多说上教程&#xff1a;&#xff08;动画教程 图文教程&#xff09;一、动画教程激活 与 升级&#xff08;至最新版本&#xff09; 二、图文教程 &#xff08;推荐&#xff09;Stage 1.下载安装 toolbox-app&#xff08;全家桶管理工具&#xff09;Stage 2 : 下…...

超级好用的C++实用库之MD5信息摘要算法

&#x1f4a1; 需要该C实用库源码的大佬们&#xff0c;可搜索微信公众号“希望睿智”。添加关注后&#xff0c;输入消息“超级好用的C实用库”&#xff0c;即可获得源码的下载链接。 概述 MD5信息摘要算法是一种广泛使用的密码散列函数&#xff0c;由Ronald L. Rivest在1991年设…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...