vue2 和 vue3 中深度选择器的使用

最新推荐文章于 2025-09-18 15:50:45 发布

原创最新推荐文章于 2025-09-18 15:50:45 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue

vue2: 使用

::v-deep .el-form-item{
}

vue3: 使用

:deep(.ant-menu-item){
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

下午坐飞机

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

100个numpy问题17-100

u011699626的博客

10-17

385

如何交换二维numpy数组中的两行元素，比如： # 要求：交换二维数组中的第一行与第二行元素 # 原始数组 array([[0, 1, 2], [3, 4, 5], [6, 7, 8]]) # 想要得到的数组 array([[3, 4, 5], [0, 1, 2], [6, 7, 8]]) 这个问题类似于100个numpy问题16-100。因此这里不做过多解释，同样给出两种方法。方法一：使用浅拷贝.copy()与中间变量temp # -*- c.

Vue3 deep深度选择器的使用修改组件样式的方法

专注基础架构领域

07-12

2754

从组件库中引入的组件深度选择器：deep和：global，在 Vue 和 SCSS 中，:deep和:global是用于控制样式作用范围的关键词。 ⭐⭐⭐在 Vue 中，:deep用于深度作用选择器，可以让样式穿透到子组件中。而:global则用于全局作用选择器，可以使样式不受组件的限制。例，在一个父组件中使用了一个子组件，并且需要修改子组件内部某个元素的样式：

参与评论您还未登录，请先登录后发表或查看评论

vue2 深度选择器

John_Crown的博客

01-08

1830

element ui组件库+vue实现了一个简单的登录界面，之后打算修改一下样式，所以设置对应的css样式。

css-深度选择器-vue2

qq_50853940的博客

04-23

1124

伪类可能仍然有效，但不建议使用，因为它不是一个官方推荐的解决方案，并且在将来的版本中可能会被彻底移除。伪类在 Vue 2.x 中是一个被废弃的特性，并且在 Vue 3.x 中已经移除。如果你正在使用 Vue 2.x，那么在某些情况下，：在 Vue 组件中，你可以使用。

Vue2 、Vue3 》》样式深度选择器 插槽选择器 样式（scoped、深度选择器、全局选择器）

最新发布

Kaizen的博客

09-18

364

默认情况下，作用域样式不会影响到渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。:global 伪类选择器用于指定某些样式应该全局生效，而不是被限制在当前组件的样式作用域内。这对于需要覆盖库组件样式或者应用一些全局样式非常有用。因为子组件内部的元素会有。

vue2.x 深度选择器 ::v-deep

monian187的博客

04-29

1083

vue2.x 深度选择器 ::v-deep

vue2、vue3css穿透（深度选择器）

weixin_46010256的博客

09-02

1650

css深度选择器

前端开发深入解析Vue中CSS深度选择器`::v-deep`：作用机制与应用场景探讨

05-20

然后分别解释了Vue2中使用>>>语法以及Vue3中推荐的::v-deep语法作为深度选择器的情况。接着列举了两种使用场景：一是修改第三方组件样式，二是作用于嵌套子组件。最后给出了一些替代方案，包括直接在子组件中暴露...

vue3使用深度选择器修改样式

weixin_53068161的博客

03-29

4815

vue3深度选择器的使用、解决警告：[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

Vue中的深度作用选择器/deep/

01-07

当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。用法如下： /deep/

Vue3 中几种独有的选择器 深度选择器:deep()、插槽选择器:slotted()、全局选择器 :global()

码农键盘上的梦

12-01

3183

在Vue中，除了常见的CSS选择器外，还有一些独有的选择器，这些选择器可以更方便地操作Vue组件。

css deep深度选择器 vue2/vue3使用

胖虎哇的博客

04-13

2060

css deep深度选择器

深度选择器的使用

song854601134的博客

04-20

2725

深度选择器 vue2.x /deep/ &::v-deep .a { } vue3.x /deep/ 下面两种都可以（ "vue": "^3.0.0"） &::v-deep(.a) { } &::v-deep .a { } 没生效的原因和解决方案搞了很久后，找到资料说，是由于vue的组件版本太低导致的，就是这俩货： "vue-loader": "^11.3.4", "vue-style-loader": "^2.0.5", vue-

vue2和vue3深度选择器

weixin_45943355的博客

02-16

1405

有时我们可能想明确地制定一个针对子组件的规则。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作

在 Vue.js 中使用:deep() 、::v-deep()、::v-deep、 /deep/还是＞＞＞呢？

weixin_65908792的博客

02-29

2088

现在2024年了，关于Vue的深度选择器（“样式穿透”——不知道谁创造的词）的使用建议该更新了。vue2:建议使用::v-deep，vue3:建议使用:deep()。

vue的深度选择器

qq_47099087的博客

06-08

276

其实除了:deep()之外vue还提供了两种深度选择器 >>>、/deep/。它们的原理和:deep是一样的，只不过没有在官网写出来罢了。我们在使用的时候也应该优先使用:deep()。组件内的元素会给他们添加一个结构为data-v-xxx的唯一的属性，然后通过属性选择器绑定样式，这样即便class或这id相同但后面属性不相同，那么也是互不影响的。首先要理解vue组件的scoped是什么意思，为什么给style标签添加scoped属性时内部的样式就不会影响到别的组件呢？

vue中深度选择器

Yan9_9的博客

11-04

5356

例如你使用了ElementUI的走马灯（轮播图）组件，你想修改其中的样式，但是你设置样式不起作用，这个时候就是因为组件的scoped的影响，所以，不妨试试我们的深度处理器吧。为了防止在一个组件内引入了子组件，而子组件没有加scoped。我们可以看到,子组件加了scoped后,父组件对h3的css样式就不会影响到子组件,如果子组件没加scoped，就会影响到也变成红色。scss: ::v-deep（如果使用了预处理器都可以使用这个(::v-deep 如果使用了预处理器都可以使用。

Vue 中深度选择器

AdleyTales的技术博客

12-31

1193

vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局，但是如果引用了第三方框架，第二层开始就不会起作用了。解决这个问题，最好要使用vue中的深度选择器，否则需要解除scope属性 >>> 作用css /deep/ 作用less/sass 比如修改element的disabled的表单样式 //修改disabled的样式 .remarks >>>.is-d.

Vue深度选择器使用指南

油墨香^-^的博客

06-04

1649

Vue深度选择器用于穿透scoped样式隔离，修改子组件或第三方组件样式。Vue2支持::v-deep、>>>和/deep/语法，Vue3推荐使用:deep()。典型应用场景包括定制UI库组件样式和父组件覆盖子组件样式。使用时应遵循最佳实践：优先通过props配置样式、减少使用频率以保持性能，并注意在Vue3项目中采用推荐的:deep()语法。过度使用可能破坏组件封装性，需谨慎处理。