当前位置: 首页 > 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年设…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...