【Vue3】 2.3 关于CSS样式穿透

最新推荐文章于 2025-10-20 16:03:58 发布
原创 最新推荐文章于 2025-10-20 16:03:58 发布 · 581 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

本文介绍了Vue3中SFC（单文件组件）的<style>标签的scoped属性，以及如何使用:deep()选择器进行样式穿透。:deep()允许样式无限穿透组件嵌套，而>>>或::v-deep则是只穿透一层。同时，通过组件穿透，可以打破scoped带来的样式隔离，使子组件能继承父组件样式。了解这些技巧，有助于更好地管理和控制Vue应用的组件样式。

下边 :deep()就是样式穿透的伪类

.information :deep(input){
	...
}

直接这样写，就是无限向下穿透层层组件嵌套

如果是像下边这样写

.information > :deep(input){
	...
}

则只穿透第一层的子组件
也就是说，:deep()这个选择器，是支持标准的css语法的

顺便提一嘴

在Vue3 的 SFC 里的Style 支持一个 scoped属性，这个属性是表明，在该style标签中定义的样式，只会作用于该SFC中的HTMLElement。
使用组件穿透，可以很好的突破这个限制，使得一些列的子组件都可以继承父组件的style。

后台管理系统-3-vue3之左侧菜单栏和头部导航栏的静态搭建
qq_20466211的博客
08-16 167
左侧菜单栏：el-menu构建菜单，通过component渲染图标。头部导航栏：左侧是一个图标，中间是面包屑，右侧是dropdown。
Vue3-专业级攻略【从小白到大神系列01】
m0_73602566的博客
12-21 999
💪单组件 多组件 组件之间的数据交流；路由，多级路由，路由守卫等Vue3特性
Vue3中的样式穿透应用场景。
专研技术的大学生:会点Java和前端
02-01 1232
Element UI（或Element Plus）中的el-table组件提供了丰富的样式和功能，包括全选框和多选功能。然而，在某些情况下，开发者可能需要修改组件内部样式，这时可以使用样式穿透技术。在Vue 2中，通常使用深度选择器（如>>>或/deep/），而在Vue 3和Element Plus中，推荐使用::v-deep。通过样式穿透，开发者可以实现去除全选框按钮或修改表头颜色等自定义样式需求。例如，使用::v-deep选择器可以隐藏全选框按钮，并通过deep(.el-table thead)修改表头
vue3第三十一节（vue3中定义局部样式，以及样式穿透）
刺客-Andy 的博客
05-16 1017
选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式。，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的。c、如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性。而样式的穿透 多用于在项目自定义修改第三方 UI库的样式，用于满足本身项目的需要；会给一个组件中的所有dom添加了一个独一无二的动态属性。转译实现的），达到样式私有化模块化的目的。
vue3：css穿透方法
最新发布
fury的博客
10-20 100
【代码】vue3：css穿透方法。
vue3学习笔记之样式穿透(:deep)及CSS 新特性(:soltted、:gloabl、v-bind、mouldCSS)
小多的博客
01-17 9738
的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式。标签会被编译为 CSS Modules 并且将生成的 CSS 类作为。渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。通过在DOM结构以及css样式上加唯一不重复的标记。：全局选择器，定义全局样式，不用单开一个没有。默认情况下，作用域样式不会影响到。常用场景：一般用于TSX和渲染函数。：改变css解析时私有属性的位置。自定义注入名称（多个可以用数组）：在子组件定义样式插槽内容样式。常见作用场景：修改组件库样式。
vue3中CSS穿透（override）
m0_48927448的博客
01-09 1565
在使用一些 CSS 预处理器（如 Sass 或 Less）时，你可能会遇到需要穿透（override）某些样式的情况。CSS 穿透是指在子组件中修改或覆盖父组件中的样式。或/deep/操作符来穿透样式。
【vue3】样式穿透、完整新特性、动态css、css-module
string佳佳的博客
10-28 2761
全局样式，跟不加scoped效果一样。vue2里面使用 /deep/vue3里面使用 :deep()
5 Vue＋html css 问题（西安10.9）
harvestUachieve的博客
10-10 1574
数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。的操作，比如改变宽高，隐藏节点等。
基于 Vue3打造前台+中台通用提效解决方案（上）
oschina_41559824的博客
03-04 4927
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？ 如果大家对的构建机制有了解的话，那么应该可以发现一个问题。 那就是**既然以原生的方式为浏览器提供源码，让浏览器接管了打包的部分工作**，那么假如我们的项目中存在 的内容怎么办?是不是就意味着无法解析呢? 是的! 在 的早期版本中，确实存在这个问题，这个问题导致的最核心的麻烦就是很多的依赖无法使用。 比如 因为
vue3+Element Plus功能组件封装——登录（用户名，密码，验证码，记住密码，登录正则验证）
布克吉的博客
08-13 861
* 登录模块 */})//标识表单//正则验证规则} else {callback()callback()} else {callback()} else {callback()}],}],}]})
关于vue3 scss语法样式穿透及scoped问题
freydog的博客
07-29 1878
vue3 scss 样式穿透
vue3样式穿透用法
weixin_72329752的博客
05-23 1133
【代码】vue3样式穿透用法。
【Vue3】样式穿透
m0_62811051的博客
12-04 944
在引用UI组件输入框 时，样式出现了如下问题，边距多了1px导致输入框与边框分离。 根据我之前的经验，只要改变其外部样式就可以了。在此之前我都是选用less预处理器，然后使用 /deep/ 深度选择器修改第三库引入的组件。但是修改失败。经过查了大量博客，发现我当前选用的时scss预处理器，那么只能用 ::deep 总结三者的区别： >>> 深度作用选择器的简写形式Vue2.x的深度作用选择器正式写法Vue3.x的深度作用选择器正式写法Vue2.x版本使用优先级
23 vue3之详解scoped&样式穿透&vuecss新特性
qq_37550440的博客
09-27 806
PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果.vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式私有化模块化的目的。Vue 提供了样式穿透:deep() 他的作用就是用来改变。
[Vue3 + TS + Vite] CSS穿透
qq_45831414的博客
07-03 735
Template中</div>CSS中/*上 右 下 左*//*上 右 下 左*/</style>设置elementPlus抽屉组件的header样式。
Vue3项目的css样式穿透问题
听雨少年的博客
08-07 1895
文章目录css样式穿透App.vueHelloWorld.vue页面效果结论 css样式穿透 在vue3项目中，组件已经不需要多个根标签了。 App.vue <template> <h2>111</h2> <hello-world></hello-world> </template> <script> import HelloWorld from "./HelloWorld.vue"; export default
详解源码vue3的样式穿透scope
apple_52957499的博客
01-21 4179
scope底层实现
vue3 样式穿透(:deep())原理
一个希望世界和平的前端程序猿的博客
12-28 4807
scoped通过给元素和css样式添加不重复的data属性(data-v-xxx)来使模块私有化(整个过程通过PostCSS转译实现)。 PostCSS会给一个组件中的所有元素添加一个唯一的data属性(data-v-xxx)，给css选择器添加一个包含该属性的属性选择器，这样就让样式只作用于含有该属性的元素，从而实现样式隔离。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值