详细讲解css的穿透方法
样式穿透(CSS穿透)的几种方法,包括在Vue中使用::v-deep、>>>、/deep/,还有pointer-events属性。还有关于Shadow DOM和::part伪元素的内容。接下来我会把这些方法分类,并详细说明每种方法的适用场景和注意事项。
首先,我们需要确定CSS穿透的不同类型。样式穿透主要分为三类:组件样式穿透、图层事件穿透和Shadow DOM穿透。组件样式穿透常见于Vue等框架中,用于修改子组件或第三方组件的样式。图层事件穿透则是通过pointer-events属性让鼠标事件穿透到下层元素。Shadow DOM穿透涉及到使用CSS变量或::part伪元素来修改Shadow DOM内的样式。
每种穿透的具体实现方式,例如,在Vue中,使用::v-deep或/deep/来穿透scoped样式,而pointer-events: none可以让上层元素不拦截鼠标事件,从而触发下层的事件。此外,Shadow DOM中的穿透方法包括CSS变量和::part伪元素,这些在自定义组件时特别有用。
还要注意不同CSS预处理器的兼容性问题。比如,在SCSS中使用::v-deep,而在Less中使用/deep/,普通CSS中使用>>>。同时,pointer-events属性在不同浏览器中的支持情况也需要提到,避免在不兼容的环境中使用。
以下是关于 CSS样式穿透 的全面解析,涵盖其定义、实现方式、适用场景及注意事项,综合多个技术场景的解决方案:
一、CSS样式穿透的定义与原理
CSS样式穿透 是一种绕过样式隔离机制,修改子组件或嵌套元素样式的技术。其核心场景包括:
- 组件化框架中的样式覆盖:如修改 Vue/React 第三方组件库(如 ElementUI、Vant)的内部样式。
- 图层事件穿透:解决上层元素遮挡下层元素鼠标事件的问题。
- Shadow DOM 穿透:调整 Web Components 的 Shadow DOM 内部样式。
原理:
- 在 Vue 的
scoped
样式中,通过 PostCSS 自动为元素添加data-v-xxxx
属性选择器,限制样式作用域。样式穿透通过特殊语法(如::v-deep
)绕过这一限制,直接作用于子组件元素 。 - 对于图层穿透,通过
pointer-events: none
禁用上层元素的鼠标事件监听,使事件“穿透”到下层元素 。
二、CSS样式穿透的三大类实现方式
1. 组件样式穿透
适用场景:修改 Vue/React 等框架中第三方组件的内部样式。
实现方式:
- Vue 语法:
>>>
:原生 CSS 写法(不兼容预处理器) 。
/deep/
:Less/Sass 中通用,但在 Vue3 中废弃 。
::v-deep
:推荐写法,兼容 Vue2/3 和主流预处理器(SCSS/Sass) 。
/* Vue 示例 */.parent ::v-deep .child { color: red; }
- 全局样式覆盖:直接通过无
scoped
的全局样式修改,但可能污染其他组件 。
注意事项:
- 避免滥用,优先通过组件 Props 或 CSS 变量定制样式 。
- Vue3 中
::v-deep
需结合:deep()
使用 。
2. 图层事件穿透
适用场景:上层元素遮挡下层元素时(如半透明遮罩层需点击下层按钮)。
实现方式:
pointer-events: none
: 禁用当前层元素的鼠标事件,使事件直接作用于下层元素 。.overlay { pointer-events: none; /* 穿透点击事件 */ } .overlay-child { pointer-events: auto; /* 子元素恢复事件监听 */ }
案例:
- 半透明遮罩层需允许点击底层按钮时,对遮罩层设置
pointer-events: none
。
3. Shadow DOM 穿透
适用场景:修改 Web Components 或自定义元素的 Shadow DOM 内部样式。
实现方式:
- CSS 变量:通过自定义变量传递样式值 。
/* 外部定义变量 */ :root {--button-bg: #007bff; } /* Shadow DOM 内部使用 */ button {background: var(--button-bg); }
::part
伪元素:通过part
属性标记可穿透的元素 。<custom-button part="button">Click</custom-button> <style>custom-button::part(button) {color: red;} </style>
注意事项:
- Shadow DOM 的样式隔离较强,优先使用官方暴露的 CSS 变量或
::part
接口 。
三、兼容性与最佳实践
1. 兼容性
::v-deep
//deep/
:Vue2 全支持,Vue3 仅支持:deep()
。
pointer-events
:IE11+ 及现代浏览器均支持 。::part
:Chrome 73+、Firefox 69+,IE/旧版 Safari 不支持 。
2. 最佳实践
- 优先使用框架推荐方案:如 Vue 的
::v-deep
,避免直接操作 DOM 。
- 最小化穿透范围:尽量通过类名限定作用域,减少全局污染。
- 替代方案:
- 通过 CSS 变量或组件 Props 传递样式 。
- 使用
@starting-style
规则处理动态插入元素的过渡效果 。
- 通过 CSS 变量或组件 Props 传递样式 。
四、总结对比
穿透类型 | 实现方式 | 适用场景 | 注意事项 |
---|---|---|---|
组件样式穿透 | ::v-deep 、/deep/ 、>>> | 修改第三方组件样式 | Vue3 语法变化,避免滥用 |
图层事件穿透 | pointer-events: none | 遮罩层点击穿透 | 子元素需单独恢复事件 |
Shadow DOM 穿透 | CSS 变量、::part 伪元素 | 自定义 Web Components | 依赖组件暴露接口 |
相关文章:
详细讲解css的穿透方法
样式穿透(CSS穿透)的几种方法,包括在Vue中使用::v-deep、>>>、/deep/,还有pointer-events属性。还有关于Shadow DOM和::part伪元素的内容。接下来我会把这些方法分类,并详细说明每种方法的适用场景和注意事项…...
深入理解 tree 命令行工具:目录结构可视化的利器
文章目录 前言1. 什么是 tree 命令?安装 tree 2. tree 的基本用法显示当前目录的树状结构显示指定目录的树状结构 3. tree 的常用选项3.1 显示隐藏文件3.2 排除特定目录或文件3.3 限制递归深度3.4 显示文件大小3.5 显示文件的权限信息3.6 将输出保存到文件 4. 实际应…...
【QA】QT中事件和信号的区别以及联系是什么?
在 Qt 中,事件(Event) 和 信号与槽(Signals & Slots) 是 GUI 编程的核心机制,它们既有联系又有本质区别。以下从底层原理、触发流程、代码实现、适用场景四个维度展开对比,并通过大量示例说…...
C++实用函数:find与find_if
本篇来介绍C++中find和find_if函数的使用,通过多个实例来演示。 find用于基础的查找功能,find_if可以实现更复杂的匹配查找条件。 1 find 1.1 函数原型 template <class InputIterator, class T> InputIterator find ( InputIterator first, InputIterator last, c…...
全面了解 Cookies、Session 和 Token
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…...
酷淘商场项目【从零到一详解】Web端
✨博客主页: https://blog.csdn.net/m0_63815035?typeblog 💗《博客内容》:.NET、Java.测试开发、Python、Android、Go、Node、Android前端小程序等相关领域知识 📢博客专栏: https://blog.csdn.net/m0_63815035/cat…...
如何转移虚拟主机?最新虚拟主机迁移方法
转移网站并不困难,但选择正确的选项和最佳程序才是关键。网站托管服务被视为当今数字世界的基石,全球有18 亿个网站。网站所有者可以通过下载备份、将其上传到新服务器并指向域名来手动转移网站。他们还可以通过新网站托管商的助手请求来移动网站。对于初…...
JVM 核心知识点总结
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…...
无人机数据链技术详解,无人机图传数传技术,无人机数据传输技术原理
以下是对无人机数据链技术、无人机图传数传技术以及无人机数据传输技术原理的详细解释: 无人机数据链技术 无人机数据链是任务机、地面控制站之间,以及任务机与中继机、武器系统或其它操作平台之间,按照约定的通信协议和信息传输方式&#…...
【Linux】同步原理剖析及模拟BlockQueue生产消费模型
📢博客主页:https://blog.csdn.net/2301_779549673 📢博客仓库:https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! &…...
【AVRCP】GOEP互操作性深度解析:蓝牙封面艺术传输的技术实现与演进
目录 一、技术基础:协议架构与核心概念 1.1 GOEP协议体系解析 1.2 IrOBEX协议关键技术 1.3 版本强制性要求 1.4 关键特性对比(GOEP v2.0 vs v1.1) 1.5 关键技术实现细节 1.6 GOEP v2.0互操作性要求 1.7 IrOBEX v1.5互操作性要求 二、…...
三分钟读懂微服务
一、什么是微服务 微服务,简单来说,就是把一个庞大复杂的软件系统,拆分成一个个小型的、独立的服务模块。打个比方,一个大型商场就如同传统的单体架构软件系统,里面所有的店铺、设施都紧密关联在一起。而微服务架构下…...
《Oracle DBA入门实战:十大高频问题详解与避坑指南》
Oracle DBA 入门作业十问十答 本文为 Oracle DBA 入门作业整理,涵盖工具使用、配置管理及权限控制等核心知识点,适合新手快速上手。 如有疑问或补充,欢迎评论区交流! 1. DBA 常用工具有哪些? Oracle Universal Instal…...
深入剖析 Android Compose 框架的自动动画:AnimatedVisibility 与 AnimatedContent(二十四)
深入剖析 Android Compose 框架的自动动画:AnimatedVisibility 与 AnimatedContent 引言 在 Android 应用开发中,动画是提升用户体验的重要手段。它能够让界面元素的显示与隐藏、状态的切换变得更加自然和流畅,避免生硬的变化给用户带来不佳…...
【线程安全问题的原因和方法】【java形式】【图片详解】
在本章节中采用实例图片的方式,以一个学习者的姿态进行描述问题解决问题,更加清晰明了,以及过程中会发问的问题都会一一进行呈现 目录 线程安全演示线程不安全情况图片解释: 将上述代码进行修改【从并行转化成穿行的方式】不会出…...
Cocos Creator Shader入门实战(六):使用setProperty动态设置材质属性,以及材质常用接口
引擎:3.8.5 您好,我是鹤九日! 回顾 上篇文章,我们主要讲解了关于材质的使用,主要有这么几点: 一、没有Effect资源,材质无从说起。 二、材质的构建,支持编译器和代码的动态构建 三…...
编程题记录3
九宫幻方 题目链接:https://www.lanqiao.cn/problems/100/learning/?page1&first_category_id1&second_category_id3&tags%E7%9C%81%E8%B5%9B&tag_relationintersection 先旋转、镜像得到所有的情况,可以发现情况是可以暴力得出的。…...
Geotools自动识别SLD并生成图例图片实战-以Polygon数据为例
目录 前言 一、Geotools与SLD制图基础 1、SLD是什么 2、SLD有什么用 二、SLD文件的解析与读取 1、SLD结构介绍 2、SLD实例展示 3、SLD读取方法 三、图例生成与展示 1、图例生成流程 2、图例生成实战 3、图例生成展示 四、结论 前言 在地理信息系统(GIS&…...
windows docker如何修改 默认的Container memory usage
参考:https://forums.docker.com/t/docker-on-windows-11-with-wsl2-does-not-use-the-memory-i-set-in-wslconfig/144404/3 参考:https://learn.microsoft.com/en-us/windows/wsl/wsl-config...
LabVIEW液压传动系统教学仿真平台
本文介绍了一种基于LabVIEW的液压传动系统教学仿真平台,该平台采用“老师讲解、线上仿真、线下操作”的复合实验模式,旨在提高实验教学的效率与安全性。通过实例验证,展示了该平台在教学和实际操作中的应用效果,同时也为液压传动系…...
Java实习生面试题(2025.3.23 be)
一、v-if与v-show的区别 v-show 和 v-if 都是 Vue 中的条件渲染指令,它们的主要区别在于渲染策略:v-if 会根据条件决定是否编译元素,而 v-show 则始终编译元素,只是通过改变 CSS 的 display 属性来控制显示与隐藏。 二、mybatis-…...
OpenCV第2课 OpenCV的组成结构与图片/视频的加载及展示
1.OpenCV 的组成结构 2.OpenCV 的具体模块 3. 图像的读取 4. 视频的读取 1.OpenCV 的组成结构 OpenCV 是由很多模块组成的,这些模块可以分成很多层: 最底层是基于硬件加速层(HAL)的各种硬件优化。再上一层是opencv_contrib 模块所包含的OpenCV 由其他开发人员所贡献的代…...
Blender导出fbx到Unity找不到贴图的问题
fbx导入Unity材质能不能找到贴图是一件玄学的事情。常见的情况是有些材质能找到,有些找不到: 可能有用的方法 解决方法1:把贴图文件复制过去,模型reimport; 解决方法2:导出时路径模式选复制,内…...
kafka的文章
1.面试的问题 要点 至多一次、恰好一次数据一致性超时重试、幂等消息顺序消息挤压延时消息 1.1 kafaka 生产消息的过程。 在消息发送的过程中,涉及到了两个线程,一个是main 线程,一个是sender 线程。在main 线程中创建了一个双端队列 Reco…...
Go常见问题与回答(下)
文章目录 1、通过指针变量 p 访问其成员变量 name,有哪几种方式?2、代码,说出结果3、扩容提,代码,说出结果4、指出下面这段代码的错误之处5、是否通过编译6、关于字符串连接,下面语法正确的是7、关于iota&a…...
vue3中如何缓存路由组件
在 Vue3 中缓存路由组件,主要借助<keep-alive>组件来实现,具体方法如下: 1. 全局缓存路由组件 在 App.vue 等根组件中,直接将<router-view>包裹在<keep-alive>标签内,这样所有的路由组件都会被缓存…...
云服务器怎么防御ddos攻击呢?
防御DDoS攻击是保障云服务器稳定运行的关键措施,以下是综合多种防护策略的详细方案: 1. 启用云服务商提供的DDoS防护服务 高防IP/流量清洗: 将业务流量接入云服务商的高防IP,由专业清洗中心过滤恶意流量,仅放行正常请求…...
Log4j2 的核心实现和源码分析
Log4j2 的核心实现和源码分析 1. 核心组件 1.1 Logger 功能:负责记录日志信息。实现:org.apache.logging.log4j.Logger 接口,org.apache.logging.log4j.core.Logger 类。1.2 Appender 功能:负责将日志信息输出到不同的目的地,如文件、控制台等。实现:org.apache.loggin…...
【深度学习】【目标检测】【OnnxRuntime】【C++】YOLOV3模型部署
【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV3模型部署 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV3模型部署前言Windows平台搭建依赖环境模型转换--pytorch转onnxONNXRuntime推…...
四种跨模态行人重识别可视化方法
1.Gradcam 2.检索可视化 3.tsne图 4.距离分布 需要的私聊,代码需要付费...
8个DeepSeek文章润色指令
今天道叔给各位文字工作者安利DeepSeek的8个神仙级润色指令(附真实案例拆解),建议搭配冰美式食用更佳↓↓↓ 一、【学术黑话翻译器】 适用场景:给投资人看的BP/行业白皮书/专家访谈实录 指令公式:"将以下内容转化为通俗易懂的行业洞察…...
解决PowerShell下Git中文乱码问题
解决PowerShell下Git中文乱码问题 在使用Git进行版本控制时,许多开发者可能会遇到中文乱码的问题,尤其是在Windows环境下使用PowerShell时。这不仅影响代码的阅读和提交,还可能导致一些不可预见的错误。本文将详细探讨如何在PowerShell下解决…...
oracle数据库(数据库启动关闭/sqlplus登录及基本操作/设置字符集/distinct去重)
目录 1. Oracle数据库启动 2. Oracle数据库关闭 3. sqlplus登录Oracle数据库 3.1 使用sqlplus登录Oracle数据库 3.2 使用sqlplus登录Oracle数据库 3.3 远程登录 3.4 解锁用户 3.5 修改用户密码 3.6 查看当前语言环境 4. sqlplus基本操作 4.1 显示当前用户 4.2 查看当前用户…...
mapreduce时,客户端做哪些事
在MapReduce过程中,客户端(Client)是用户提交作业的入口,负责作业的初始化、配置、资源提交和作业监控。以下是客户端在整个流程中的具体职责和操作步骤: 1. 作业配置与参数解析 设置作业属性: 定义MapRed…...
DeepBI:重构流量逻辑,助力亚马逊广告实现高效流量增长
在日益激烈的跨境电商竞争环境中,广告投放早已从“粗放撒网”走向“精细化运营”。尤其是在亚马逊这样一个成熟且竞争白热化的平台,如何在广告预算有限的前提下实现高效曝光、精准触达、稳定转化,成为众多卖家和运营团队面临的核心挑战。 De…...
Linux内核的页面错误:原因与解决方案
当程序访问虚拟内存中的一个页面时,如果该页面当前不在物理内存中,就会触发一个称为"page fault"(页异常)的异常。操作系统需要处理这个异常,并将所需页面从磁盘加载到内存中。实现虚存管理的一个关键是page…...
LORA 中的 梯度外积是什么意思; 方差和协方差的实际含义:衡量变量的离散程度和变量间的线性相关性
LORA 中的 梯度外积是什么意思 目录 LORA 中的 梯度外积是什么意思**一、梯度外积的定义****二、示例说明****步骤1:计算单样本梯度****步骤2:计算梯度外积****三、梯度外积的作用****四、总结**方差和协方差的实际含义:衡量变量的离散程度和变量间的线性相关性**一、方差(…...
XSS复现漏洞简单前八关靶场
靶场不需要安装任意环境 链接如下:XSS Game - Learning XSS Made Simple! | Created by PwnFunction 目录 XSS Game 第一关:Ma Spaghet! 第二关:Jefff 第三关:Ugandan Knuckles 第四关:Ricardo Milos 第五关&am…...
3.24-3 接口测试断言
一.postman 断言 1.断言再test中 #状态码是否等于200 tests["Status code is 200"] responseCode.code 200; #断言响应时间小于200ms tests["Response time is less than 200ms"] responseTime < 200; #断言响应体包含内容 tests["Body…...
《鸿蒙携手AI:解锁智慧出行底层逻辑》
在科技飞速发展的当下,智慧出行成为人们对未来交通的美好期许,而鸿蒙系统与人工智能的深度融合,正为这一愿景的实现提供强大助力。从技术原理角度深入剖析,鸿蒙系统究竟如何支撑人工智能在智慧出行场景中的应用呢?这背…...
【AVRCP】探寻AVRCP控制互操作性:连接、命令与设备交互
目录 一、AVCTP连接管理 1.1 AVCTP连接建立 1.2 AVCTP连接释放 二、AV/C命令的操作流程 2.1 AV/C命令交换流程 2.2 AV/C命令类型 三、AVRCP特定命令 四、AVRCP浏览命令 五、OBEX连接管理 5.1 OBEX连接建立 5.2 OBEX连接释放 六、总结 七、参考资料 AVRCP对于实现设…...
Mybatis-Plus知识点详解
Mybatis-plus(简称MP),基于Mybatis的增强工具,保留了Mybatis的所有功能,同时增加了通用的CRUD,条件构造器,分页插件等等实用工具 特性 即拿即用:通过通用Mapper和Service,无需编写XML既可以完成单表CURE操作 Lambda支持:使用Lambda表达式构建查询条件,避免硬编码字段名,提升代…...
紧凑交叉引用表
嗯,用户问的是“compact xref table”,也就是紧凑型交叉引用表。我之前在回答中提到过交叉引用流(XRef Stream),但可能需要更详细地解释两者的区别和联系。根据搜索结果中的网页1,传统的Xref表以文本形式存…...
CMake 详解:跨平台构建系统的入门与进阶
目录 一、相关知识点 1. 什么是cmake,为什么使用? 2. 构建过程 二、CMake使用流程 1. 创建 CMakeLists.txt 文件 2. 配置构建目录 3. 运行cmake 4. 运行make编译 一、相关知识点 1. 什么是cmake,为什么使用? CMake 是一个开…...
【架构设计】学习路径
掌握前置知识后,学习架构设计需要从理论认知到实践落地逐步推进。以下是系统化的学习路径,结合具体案例与实操建议,帮助你快速进阶: 一、构建架构思维基础 1. 理解架构设计的核心目标 关键问题驱动设计: 每个架构决策…...
14、Python 枚举与类型注解进阶
Python 枚举与类型注解进阶 文章概述 本文深入探讨Python中枚举(Enum)与类型注解的高级应用场景。通过剖析Enum类的核心特性、dataclass装饰器的工程实践、静态类型检查工具mypy的集成使用,结合状态机等实际案例,系统性地提升代…...
C语言 【实现电脑关机小游戏】非常好玩
引言 在时间限制内做出正确的回答,时间一到,电脑自动关机,听起来是不是很有意思,下面来看看怎么实现吧。 注意:该游戏只在windows系统下可以玩, 一、游戏原理: 在Windows系统下,通…...
【蓝桥杯速成】| 11.回溯 之 子集问题
题目一:子集 问题描述 78. 子集 - 力扣(LeetCode) 给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例…...
统计矩的高阶推广:经验还是理论推导?
矩的发展既是经验总结的结果,也是数学理论推导的产物。研究者们在分析数据、描述物理现象的过程中,发现了低阶矩与日常物理概念(如质心、惯性)之间的紧密联系,而高阶矩的应用往往出现在更复杂的数学体系中,…...
SpringBoot2集成Elasticsearch8(使用spring-boot-starter-data-elasticsearch)
写在前面 使用spring-boot-starter-data-elasticsearch集成Elasticsearch8? What? 官方写的不支持啊?让我们来看下官方给出的版本建议。 官方地址: https://docs.spring.io/spring-data/elasticsearch/reference/elasticsearch/versions.…...