vue中的scoped，与css中的/deep/深度选择

最新推荐文章于 2024-03-29 22:53:58 发布
最新推荐文章于 2024-03-29 22:53:58 发布
阅读量266 收藏
点赞数
文章标签： css vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51795940/article/details/130870574
版权

scped含义和作用

当 <style 标签带有 scoped attribute 的时候，它的 CSS 只会影响当前组件的元素，和 Shadow DOM 中的样式封装类似。

在这里插入图片描述
该搜索框无法显示完全是因为父组件的max-width :60%
在这里插入图片描述
修改子组件，在子组件前加 /deep/后样式显示成功
在这里插入图片描述
在这里插入图片描述

/deep/的语法

::v-deep (scss)

/deep/ (less)

/deep/含义和作用

/deep/ 是一种深度选择器，用于选择某个元素的所有后代元素，使他们显示与父组件样式

还乡去
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue Scss中/deep/无效问题
News777的博客
04-25 3706
问题 Syntax Error: SassError: expected selector. ╷ 850 │ /deep/ .el-table__body{ │ ^ 解决 在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
Vue中的深度作用选择器/deep/
01-07
在我们使用Vue搭建项目的时候，我们经常会用到一些UI框架，如Element，iView，但是有时候我们又想去修改UI框架的样式，当我们修改样式失败的时候，可以尝试一下/deep/，亲测有效。 那失败的原因是什么呢？ UI框架的样式是定义在全局中，我们使用scoped时，局部样式会被全局样式所覆盖（vue默认全局样式覆盖局部样式）。 有多种解决方法，推荐使用/deep/。 当希望scoped样式中的选择器“深入”，即影响子组件，则可以使用>>>组合器，/deep/是它的别名。 有些像 Sass 之类的预处理器无法正确解析 >>>，使用 /deep/ 操作符取而代之。 用法如下： /deep/
vue css中/deep/及＞＞＞用法
Allen-Ye博客
04-21 1798
/deep/ 深度选择器 在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加父组件： <template> <div> <h1 class="title">{{ name }}</h1> <input type="text" v-model.lazy="name"> <child /> </div> </template>
Vue3修改子组件CSS(使用:deep())
最新发布
Kevin的博客
03-29 318
2、在父组件中修改对应的class。1、在子组件中设计class。
vue2、vue3css穿透（深度选择器）
weixin_46010256的博客
09-02 1079
css深度选择器
Vue 的深度 CSS 选择器
lio-zero 的博客
05-22 713
我们知道，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件或修改第三方库组件的样式时，你可以使用深度选择器。 在 Vue2.x 有三种选择： >>> — 有些例如 SASS 预处理器无法正常解析，使用前需注意 ...
css deep深度选择器 vue2/vue3使用
weixin_51448331的博客
04-13 1134
css deep深度选择器
vue项目中，scss 使用 /deep/ 穿透写法
热门推荐
qq_36437172的博客
08-20 5万+
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它通过使用 PostCSS 来实现以下转换： <template> <div class="example" data-v-f3f3eg9>hi</div> </template> <style> .example[data-v-f3f3eg9] { color: red; } </...
vue里面通过deep处理css样式的一些用法
qq_24418107的博客
06-20 1490
【代码】vue里面通过deep处理css样式的一些用法。
Vue2、Vue3中 CSS 样式穿透
lsy1234565的博客
09-30 1812
【代码】Vue2、Vue3中 CSS 样式穿透。
vue3学习笔记之样式穿透(:deep)及CSS 新特性(:soltted、:gloabl、v-bind、mouldCSS)
小多的博客
01-17 8685
的方式，以保证唯一（而这个工作是由过PostCSS转译实现的），达到样式。标签会被编译为 CSS Modules 并且将生成的 CSS 类作为。渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。通过在DOM结构以及css样式上加唯一不重复的标记。：全局选择器，定义全局样式，不用单开一个没有。默认情况下，作用域样式不会影响到。常用场景：一般用于TSX和渲染函数。：改变css解析时私有属性的位置。自定义注入名称（多个可以用数组）：在子组件定义样式插槽内容样式。常见作用场景：修改组件库样式。
深入浅析Vue中的slots/scoped slots
08-27
主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理，需要的朋友可以参考下
Vue中的scoped实现原理及穿透方法
08-27
主要介绍了Vue中的scoped实现原理及穿透方法,本文通过实例文字相结合的形式给大家介绍的非常详细，需要的朋友可以参考下
Vue中对比scoped css和css module的区别
08-27
主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本
computed和watch的区别
qq_43653325的博客
02-01 366
···js 一watch擅长处理的场景：一个数据影响多个数据 不支持缓存，数据变，直接会触发相应的操作； 2.watch支持异步； 3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 当一个属性发生变化时，需要执行对应的操作；一对多； 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数， 　　immediat...
vue深度css样式
xiaoran_1997的博客
12-21 514
vue 2 >>> 或者 /deep/ 或者 ::v-deep vue 3 :deep(.class)
《Vue 的CSS之deep语法》
lanchengxiaoxiao的专栏
03-03 5814
介绍 | Vue Loader vue-loader.vuejs.org/zh/guide/scoped-css.html ::v-deep 我们知道，在Vue组件的style标签里，加上scoped属性，会使写的样式只影响当前的组件，不会影响到子组件。 去掉scoped就可以了，但是去掉scoped同时也会导致其他问题，可能会影响到别的。 有什么方法能在父组件的css里影响子组件的样式，同时保留scoped呢？ deep有两种写法，::v-deep兼容性最强， 优先使用这个。 使用方法：在想
vue3 样式穿透(:deep())原理
一个希望世界和平的前端程序猿的博客
12-28 2488
scoped通过给元素和css样式添加不重复的data属性(data-v-xxx)来使模块私有化(整个过程通过PostCSS转译实现)。 PostCSS会给一个组件中的所有元素添加一个唯一的data属性(data-v-xxx)，给css选择器添加一个包含该属性的属性选择器，这样就让样式只作用于含有该属性的元素，从而实现样式隔离。
css穿透 /deep/和scoped
03-29
在Vue和React中，可以使用/deep/或>>>来实现CSS穿透。 /deep/和>>>都是特殊的选择器，可以穿透子组件的作用域，从而修改父组件的样式。它们的使用方式类似，只不过/deep/是深度选择器，而>>>是浅度选择器。 scoped...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值