vue------ 关于深度选择器（>>> | /deep/）

最新推荐文章于 2024-08-06 10:46:01 发布

绝世唐门三哥

最新推荐文章于 2024-08-06 10:46:01 发布

阅读量3.6k

点赞数 2

分类专栏： Vue 知识点总结文章标签：深度选择器

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/102783138

版权

知识点总结同时被 2 个专栏收录

257 篇文章 4 订阅

订阅专栏

Vue

38 篇文章 1 订阅

订阅专栏

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)

<style scoped>

  外层 >>> 第三方组件 {

      样式

  }

/deep/  第三方组件 {

      样式

  }

</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

绝世唐门三哥

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解

余浩的博客

03-06

4945

（1）vue-class-component 是官方出品； vue-property-decorator 是社区出品；（2）vue-class-component 提供了Vue、Component等；（3）vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；

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

01-07

在我们使用Vue搭建项目的时候，我们经常会用到一些UI框架，如Element，iView，但是有时候我们又想去修改UI框架的样式，当我们修改样式失败的时候，可以尝试一下/deep/，亲测有效。那失败的原因是什么呢？ UI框架的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）。有多种解决方法，推荐使用/deep/。当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。用法如下： /deep/

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

vue深度选择器（:deep）

徐同保的专栏

05-22

989

vue深度选择器（:deep）

深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别与用法

油墨香^-^的博客

08-01

369

深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。

VUE中的/deep/用法

最新发布

weixin_43617604的博客

08-06

389

在scoped标记的style中，只要涉及三方组件，那deep符号会经常被使用，用来修改外部组件的样式。要想修改三方组件样式，只能添加到scoped之外，弊端是污染了全局样式，后续可能出现样式冲突。由于/deep/或者>>>在less或者scss中存在兼容问题，所以不推荐使用了。deep是不支持嵌套的。

关于/deep/, ::v-deep, ＞＞＞

weixin_45121510的博客

12-25

562

当我们在项目中：需要改变element某个自带的深层元素或其他深层样式时???? 如果是： ????scss/less语言： <style lang="scss" scoped> (scoped属性实现组件样式私有化), ????1：(简单粗暴) 直接移除scoped 或者最好是新建一个没有scoped的style <style lang="scss"> （一个vue文件可以有多个style） ????2: ✋/deep/ .div /deep/ .el-input__inner

vue 深度作用选择器 ＞＞＞、/deep/、::v-deep

yxm_136452789的博客

01-22

3033

vue项目中，会使用elementUI等组件库，有些样式直接在组件中修改无效，又因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。所以会用深度作用选择器来修改样式。 1，>>> 如果vue的style使用的是css,就可以用>>>。 <style scoped> .hide >>> el-upload--picture-card { display:none; /* 上传按钮隐藏 */ } <

深度选择器{/deep/ ；＞＞＞； ::v-deep }在vue前端项目中使用注意事项

m0_49714202的博客

02-25

838

官网地址:https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8 >>> 在vue中需要去掉 lang 就是原生写法css /deep/ 可以在vue中加lang的css预处理器加less和scss, 用的时候有时会报错 ::v-deep 也可以在vue中加lang的css预处理器加less和s

vue样式穿透 ::v-deep的具体使用

10-15

`::v-deep` 是 Vue 2.x 推荐的深度选择器，用于穿透组件的样式隔离。它的工作原理是在 CSS 选择器前添加一个特殊标识，使得选择器能够触及到组件内部的子元素。在 Vue 3 中，`/deep/` 已经被废弃，而 `::v-deep` ...

样式穿透＞＞＞ /deep/ ::v-deep

qq_44950078的博客

11-24

645

1、 >>> 如果项目使用的是css 原生样式,那么你可以直接使用 2、 /deep/ 项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错。可以使用 /deep/ 注意：vue-cli3以上版本不可以，可能会报警告或者报错。 3、::v-deep 如果使用了预处理器都可以使用 ::v-deep ...

VUE开发中/deep/的使用其他写法v-deep:: vue3中写法 :deep(.img)

Beatingworldline的博客

09-22

2万+

实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式这时候有两条路可选自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路对组件原生样式进行改写而改写样式就需要用到/deep/样式穿透了 /deep/ VUE官方为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。这样在打包的时候会生成一个独一

【Vue】/deep/、＞＞＞、v::deep 三种深度选择器

Owen的博客

06-27

3791

在 Vue项目中，当一个组件使用了scoped特性时，组件内的样式只会应用于组件自身。但是有时候我们需要在父组件中改变子组件中的样式，这时就需要用到深度选择器。

＞＞＞ /deep/ ::v-deep 深度作用选择器

一往直“前”，直上云“端”

08-23

2830

在写一些vue项目时候，经常会引入一些组件。无论是自定义组件还是引入的外部组件。style经常用scoped属性实现组件的私有化，防止影响到其他页面上的样式。但是有时需要在父组件中更改自组件的样式，比如要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，就要用到组件穿透（也叫深度修改css，深度作用选择器）可用的方法有 >>> 、 /deep/ 、 ::v-deep 有些像 Sass 之类的预处理器无法正确解析 >>&g...

Vue中的scope详解以及使用/deep/解决组件样式不起作用

weixin_42017221的博客

11-02

2368

1.给组件加scope后，该组件的根元素的样式会自动添加哈希值，表示该组件的样式不会影响其他组件（一般第三方组件，比如vant组件都会有哈希值）2.默认只能在父组件修改子组件根元素的样式，如果想修改子组件更深层元素的组件的样式，就给子组件样式加/deep/(浏览器兼容性最好)

vue scoped 以及 /deep/ 原理

pspxuan的博客

08-17

521

使用 vue 写样式时，可以使用 scoped 属性，使组件得样式只在当前组件生效原理： vue 会给每个节点添加一个属性值，并且处理样式时，给每个样式添加一个属性选择器，如下 // html <div class="fotter" data-v-001></div> // css .fotter[data-v-001] { /* ... */ } ...

更改第三方组件样式需要使用深度选择器

weixin_45842460的博客

07-13

208

通过 >>> 穿透scoped <style scoped> 外层 >>> 第三方组件类名{ 样式 } </style> <style scoped> .app >>> .ktt{ color: red; } 有些Sass 、Less之类的预处理器无法正确解析 >>>。可以使用 /deep/操作符( >>> 的别名) .app { col

vue css深度选择器::v-deep

08-24

- *2* [vue 深度选择器 ＞＞＞或 /deep/ 或 ::v-deep](https://blog.csdn.net/yuan_jlj/article/details/118525646)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...