/deep/和 ＞＞＞以及 ::v-deep 三者的区别

最新推荐文章于 2024-06-04 08:41:33 发布
最新推荐文章于 2024-06-04 08:41:33 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： Vue 文章标签： css css3 前端
原文链接：https://www.cnblogs.com/cqiong/p/15007218.html
版权

>>>

深度作用选择器的简写形式

  1. 只作用于css，不支持css预加载器（less/scss）
  2. 是/deep/的简写形式,适用于Vue2.x版本，Vue3.x版本使用会报错

/deep/

Vue2.x的深度作用选择器正式写法

  1. 仅适用于Vue2.x版本
  2. 支持css预加载器

::v-deep

Vue3.x的深度作用选择器正式写法

总结

Vue2.x版本使用优先级 /deep/ > >>>
Vue3版本使用::v-deep

兴趣使然的码仔
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈CSS中/deep/ ＞＞＞ ::v-deep属性 进行样式穿透
m0_48895571的博客
04-01 4628
浅谈CSS中/deep/ >>> ::v-deep属性 进行样式穿透
Deep Learning (Adaptive Computation and Machine Learning series) 最新中文版
11-12
《Deep Learning（Adaptive Computation and Machine Learning series）》是由Yoshua Bengio、Ian Goodfellow和Aaron Courville三位专家共同撰写的权威教材，为读者提供了全面深入的深度学习理论和实践知识。...
::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深度选择器 ::v-deep、 :deep()
最新发布
油墨香^-^的博客
06-04 234
deep()是一个伪类，它可以使处在scoped样式中的选择器影响到子组件。使用scoped后，父组件的样式将不会渗透到子组件。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子节点根元素的样式。
css深度选择器＞＞＞、/deep/ 、::v-deep 、:deep()
weixin_43422861的博客
11-30 3980
>>>、/deep/ 、::v-deep 、:deep(）
深度选择器 /deep/ ＞＞＞ ::v-deep的用法
m0_58348743的博客
12-30 2439
深度选择器 /deep/ >>> ::v-deep的用法
/deep/和::v-deep与:deep()
qq_39410252的博客
04-18 1万+
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在 <style> 标签上设置scoped属性，这样它的 CSS 只会应用到当前组件的元素上，即使父组件中有跟子组件相同的class名称或者选择器的时候，也不会影响到子组件的样式。 但是有的时候我们需要，我们需要在一个组件中改变被引入组件的样式，直接使用class命名改变样式没有任何反应，这种情况就需要使用/deep/或::v-deep了。 在vue3.0之前可使用/deep/深度选择器进行样式的更改 //单选框修改未点击时的边框颜色 /
vue 深度作用选择器 ＞＞＞、/deep/、::v-deep
weixin_41549971的博客
02-01 1295
vue 深度作用选择器 ＞＞＞、/deep/、::v-deep
cudnn-7.0-win10-x64-v3.0-prod.zip
06-28
标题"**cudnn-7.0-win10-x64-v3.0-prod.zip**"指的是CuDNN的一个特定版本，适用于64位Windows 10操作系统，版本号为7.0的第三版产品级版本。 CuDNN的全称是CUDA Deep Neural Network library，它是深度学习框架如...
吴恩达coursera deeplearning深度学习课程2第3周程序 (py工程)
02-01
吴恩达在Coursera上的深度学习课程是全球范围内广受欢迎的在线教育资源，尤其适合对人工智能和深度学习感兴趣的初学者以及希望深化理论与实践能力的专业人士。这门课程的第二部分，第三周的编程作业涉及到TensorFlow...
A guide to convolution arithmetic for deep learning
08-05
深度学习中的卷积运算与反卷积运算是构建和...通过深入学习《A guide to convolution arithmetic for deep learning》这份指南，读者可以系统地学习和掌握这些重要概念，提升自己在深度学习领域的理论知识和实践能力。
Vue中watch、computed、updated三者的区别及用法
11-20
<input type="text" v-model="str"> <p>{{ reverseStr }}</p> </div> <script> new Vue({ el: "#myApp", data: { str: "abcd", }, computed: { reverseStr() { return this.str.split("").reverse().join...
/deep/ ＞＞＞ ::v-deep的用法
weixin_49743062的博客
10-27 4271
而/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三个都是。实现组件样式私有化，导致。
Vue 深度选择器:deep()与::v-deep详解
CCC_chtt的博客
04-26 2万+
深度选择器:deep()与::v-deep详解
css关于/deep/的解释和用法
热门推荐
weixin_40442888的博客
07-29 5万+
/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存...
css中＞＞＞、/deep/、::v-deep的作用和区别，element-ui自定义样式
小马甲
01-22 1771
deep/在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（例如）或其他深层样式时，需要使用/deep/注意，/deep/在vue 3.0会报错个人推荐项目使用::v-deep修改样式本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
vue2和vue3深度选择器
weixin_45943355的博客
02-16 1183
有时我们可能想明确地制定一个针对子组件的规则。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作
深度选择器/deep/、::v-deep、:deep的区别
qq_53911056的博客
03-29 1329
深度选择器/deep/、::v-deep、:deep，三个选择器都是用于穿透组件作用域并样式化子组件内部元素的。在 Vue.js 2中，可能更倾向于使用 /deep/；而在 Vue.js 3中，应该使用 ::v-deep 或其别名 :deep......
/deep/和::v-deep的区别
08-28
/deep/ 和 ::v-deep 的区别是： 1. /deep/ 是旧版本的 CSS 选择器，用于穿透组件边界，直接作用于子组件的样式。它可以让你在样式中修改子组件的样式，而不受组件边界的限制。 2. ::v-deep 是 Vue.js 中的一个特殊...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值