深度选择器/deep/ ::v-deep

最新推荐文章于 2024-09-29 17:31:02 发布
最新推荐文章于 2024-09-29 17:31:02 发布
阅读量1.5k 收藏
点赞数
文章标签： css sass 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyblm521/article/details/112908651
版权

通常我们在使用第三方组件库的时候，想修改一些组件的基础样式，而类名等一些选择器在组件上又没有写。我们F12打开开发者工具，查看元素里面的类名，id等，但我们直接去选择却又选不到指定元素，因为你这个类名在你的代码中是没有的，只是被浏览器解析出来了，这个时候可以用/deep/进行深度选择，而在scss这样的预处理器却不支持这个写法，会报错，在scss中可以使用::v-deep(ps:直接复制别人的好像不太行，必须要输入法切换成英文自己手写)

宝藏男孩儿。
关注
vue 深度作用选择器 ＞＞＞、/deep/、::v-deep
weixin_41549971的博客
02-01 1474
vue 深度作用选择器 ＞＞＞、/deep/、::v-deep
深度选择器{/deep/ ； ＞＞＞ ； ::v-deep }在vue前端项目中使用注意事项
m0_49714202的博客
02-25 930
官网地址: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
深度选择器 /deep/ ＞＞＞ ::v-deep的用法
m0_58348743的博客
12-30 2502
深度选择器 /deep/ >>> ::v-deep的用法
/deep/和＞＞＞和::v-deep
Winsom1的博客
08-31 596
在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如 .conBox /deep/ .el-input__inner{ padding:0 10px; } 注意，/deep/在vue 3.0会报错 如果/deep/报错，可采用::v-deep，效果基本一样，有人说::v-deep能加快编译速度，但是我在网上没有找到相关资料，无从验证。 .conBox ::v-deep .el
深度选择器的区别与用法
最新发布
weixin_52740695的博客
09-29 439
在vue项目中，尤其是组件化开发中，有时需要对组件内部的某些样式优化，但vue的样式封装特性（scoped）会阻止外部样式直接作用于组件内部。于是，为了能够跨越组件定制内部元素样式，引入了深度选择器，也称为穿透选择器或阴影穿透选择器。接下来就讲讲＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法。
深度选择器/deep/、::v-deep、:deep的区别
qq_53911056的博客
03-29 3207
深度选择器/deep/、::v-deep、:deep，三个选择器都是用于穿透组件作用域并样式化子组件内部元素的。在 Vue.js 2中，可能更倾向于使用 /deep/；而在 Vue.js 3中，应该使用 ::v-deep 或其别名 :deep......
css中＞＞＞、/deep/、::v-deep的作用和区别，element-ui自定义样式
小马甲
01-22 3400
deep/在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（例如）或其他深层样式时，需要使用/deep/注意，/deep/在vue 3.0会报错个人推荐项目使用::v-deep修改样式本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
关于深度选择器/deep/（::v-deep）和＞＞＞
大香蕉的博客
07-31 7344
深度选择器为什么出现？ 在使用vue开发时组件私有化样式时使用scoped实现，此时我们使用普通的方式修改第三方库某些样式，如elementui组件的样式是不生效的。原因是scoped会自动在元素上添加一段特殊的标识，如：v-data-254811...等。 使用>>> <style scoped> #app >>> a { color: red } </style> 但是如...
vue样式穿透 ::v-deep的具体使用
10-15
`::v-deep` 是 Vue 2.x 推荐的深度选择器，用于穿透组件的样式隔离。它的工作原理是在 CSS 选择器前添加一个特殊标识，使得选择器能够触及到组件内部的子元素。在 Vue 3 中，`/deep/` 已经被废弃，而 `::v-deep` ...
Vue中的深度作用选择器/deep/
01-07
当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。 有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。 用法如下： /deep/
深度选择器探秘：/deep/、＞＞＞、::v-deep 与 v-deep() 的区别
everyStudy的博客
08-27 485
deep/
/deep/ ＞＞＞ ::v-deep的用法
weixin_49743062的博客
10-27 4612
而/deep/ 和 ::v-deep的区别是 vue2中使用::v-deep vue3中使用/deep/样式如果是sass/less 用>>>选择器无效 要选择/deep/ 或者 ::v-deep。//举例1：vue2中去除element-table中表格使用固定列下方出现的一条线。//举例2：vue2中el-dialog里面的form-item改变间距。//举例3 直接不使用::v-deep /deep/ >>>/deep/ >>> ::v-deep三个都是。实现组件样式私有化，导致。
深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞
热门推荐
千里之行，始于足下！
01-26 1万+
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。 去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录 1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式 <style lang="css" s.
::v-deep和/deep/区分
qq_42177755的博客
10-27 1万+
1、 >>> 使选择器能够作用得“更深”，可以影响到内部子组件 例: 如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改 <style scoped> .a >>> .b { /* ... */ } </style> // 上述代码将会编译成： .a[data-v-f3f3eg9] .b { /* ... */ } 2、项目中用到了预处理器 scss 、sass、less 操作符 >>&gt..
Vue中scoped、＞＞＞、/deep/、::v-deep的原理
油墨香^-^的博客
04-30 419
平时开发项目我们在使用第三方插件时，必须使用element-ui的某些组件需要修改样式时，老是需要加上/deep/深度选择器，以前只是知道这样用，但是还不清楚他的原理。还有平时每个组件的样式都会加上scoped，但是也不知道他具体的原理。今天我就带大家理解理解理解。
一文弄懂vue中样式穿透v-deep
时清云的博客
04-02 3379
在vue3的世界里，有一个style标签的关键字v-deep，官网称之为样式穿透。那他究竟是什么原理呢？又是怎么工作的呢？让我们一起探究一下。
Vue 深度作用选择器 /deep/穿透 与scoped
11-23 1945
使用 scoped 后，父组件的样式将不会渗透到子组件中。 <template> <div id="app"> <el-input class="text-box" v-model="text"></el-input> </div> </template> <script> export default { name: 'App', data() { return { text
小程序/deep/不生效
m0_61749410的博客
02-24 1404
小程序/deep/失效
Vue 深度选择器:deep()与::v-deep详解
09-08
Vue提供了两种深度选择器的写法：::v-deep和/deep/。这样可以在父组件中修改子组件的内层元素样式。 使用::v-deep写法，可以在父组件的style标签中直接使用选择器来修改子组件的样式。例如： ```html .parent ::v-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值