深度选择器，样式穿透

最新推荐文章于 2024-03-18 10:22:01 发布
最新推荐文章于 2024-03-18 10:22:01 发布
阅读量873 收藏 2
点赞数 1
分类专栏： js 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57057576/article/details/125478199
版权
本文介绍了Vue中style的scoped属性以及如何进行样式穿透。使用scoped可以使样式仅作用于当前组件，但若需影响子组件样式，需借助/deep/（less）、::v-deep（scss）进行选择器穿透。示例展示了在不同预处理器中如何匹配并修改子组件的样式。
摘要由CSDN通过智能技术生成

深度选择器分类，
>>> 一般用于原生css
/deep/ 一般用于less
::v-deep 一般用于scss

示例如下：
为style添加scoped
1: scoped属性的作用
加上scoped的作用是，使style的样式只对于当前的组件有用。
本质上，对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v xxxx自 定属性
会发现vue是通过属性选择器，给需要添加的元素添加上样式
h3[ data-v- 7ba5bd90]
在这里插入图片描述
Child为子组件，内部代码为：
在这里插入图片描述
展开控制台，代码为：
在这里插入图片描述
若想在父组件中操作子组件样式，父组件内标签都会自动添加【属性】，如，
div div h3=>div[data-v-7b…] div[data-v-7b…] h3[data-v-7b…]
而我们想要的是，div[data-v-7b…] div[data-v-7b…] h3[data-v-2d…]
故，需要进行样式穿透，
若为less，可以使用

div div /deep/h3 来匹配上 div[data-v-7b...] div[data-v-7b...] h3[data-v-2d...]
小曾哥呀
关注
专栏目录
css样式穿透（深度选择器）
m0_67401660的博客
08-01 843
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。有时会发现使用了以上方法修改element组件样式还是会不生效，适用与css、stylus，不太推荐，可能会有问题。...
css样式穿透(深度选择器)
m0_46862838的博客
12-10 1443
大家是不是遇到了这种情况 —> 当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想组件之间的样式覆盖，这时候需要调整它的样式，于是在网页中找到需要改变的样式的类，在浏览器中测试效果很ok，可是当在代码中写，不管怎么都不能改变它的样式。这时就有了 样式穿透 1、stylus的样式穿透 使用 >>> 语法: 外层容器 >>> 组件 { } 备注: 不太推荐使用这种方式,据说有点问题！ & >&g
Vue和React的样式穿透 —— 深度选择器
不怕麻烦的鹿丸的博客
03-20 2729
一般我们在写组件的时候，为了防止被其他组件内的样式冲突，习惯写一些局部样式，采用modules方案解决组件间的覆盖问题。但是如果html里有些class是需要根据条件判断来显示的话，在样式编译的时候，编译器会默认该样式不存在，从而直接把样式文件里写的class样式被忽略掉，最后编译出来的样式就会没有我们写的class样式，那这时候就需要使用解决。
react-React组件的css选择器
08-15
React组件的css选择器
scss中深度选择器如何使用
2401_83036723的博客
02-29 3708
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/
react：css样式穿透
mosowe
10-21 1万+
假设我们有个index.tsx文件以及index.less样式文件 index.less .rowSelectDisable{ .content{...} } index.tsx引入index.less import style from './index.less' index.tsx DOM <div className={style.rowSelectDisable}> <Detail></Detail> // 假设Detail组件里面有个类名：con
react如何做scss样式穿透
xm1037782843的博客
10-26 775
样式穿透
解析vue、angular深度作用选择器
10-16
此时，Vue提供了`/deep/`或`>>>`这两个深度选择器，它们的作用是允许CSS选择器穿透单文件组件（SFC）的样式隔离层，从而影响组件内部的子元素样式。例如： ```css .some-component /deep/ .element-to-style { ...
【Vue项目笔记心得】深度选择器
qiaoyangla的博客
07-13 2140
对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v-xxxx自定的属性。 vue是通过属性选择器给需要添加的元素加上样式。scoped作用：只对当前的组件有用（样式） 在父组件中再添加一个子组件，子组件的根标签，会拥有父组件当中的自定义属性。 注意下面只有div标签有data-v-7ba5b90属性： 如果 子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。这里h3也就相当于根标签了，也具有父组件的data-v-7ba5b90属性：
vue样式穿透 ::v-deep的具体使用
10-15
`::v-deep` 是 Vue 2.x 推荐的深度选择器，用于穿透组件的样式隔离。它的工作原理是在 CSS 选择器前添加一个特殊标识，使得选择器能够触及到组件内部的子元素。在 Vue 3 中，`/deep/` 已经被废弃，而 `::v-deep` ...
在react项目中使用less
名人卷耶
06-28 962
1.首先安装less和less-loader： npm install less less-loader --save-dev 2.还需要在webpack中进行配置：运行 npm run eject，运行完毕后项目中会多出一个 config 的文件夹找到 webpck.config.js，大约50行的位置添加 less 代码： // 新加less const lessRegex = /\.less$/ const lessModuleRegex = /\.module\.less$/ 然后在module
使用深度选择器实现样式穿透
前端如逆水行舟...
08-26 975
我们需要使用样式穿透（深度选择器），它有三种书写方式，分别针对 原生css：>>> less: /deep/ 如果父组件的样式（scoped）且还想影响到子组件的样式 像这种情况我们可以选择使用深度选择器，它可以实现样式穿透，看下图： scss:::v-deep......
深度选择器——vue或react中修改组件样式的方法
杜永康的博客
06-14 5028
6.权重问题，因为这种选择器的使用，具有穿透性，即使是引入的组件，通过f12找到元素类名，可以通过这样的方式修改其样式，但要注意，这边修改一个样式，其他地方有的样式也可能会变，这就一定要选择。⭐⭐使用 className 和全局 CSS 样式表：在组件模板中使用 className 属性来设置类名，然后在全局 CSS 样式表中定义对应的样式。⭐⭐使用 class 属性和全局 CSS 样式表：在组件模板中使用 class 属性来设置类名，然后在全局 CSS 样式表中定义对应的样式。
css,less,scss中的深度选择器，结合elementUi使用
LiuJia20010827的博客
07-07 1460
css中深度选择器用到的是 >>>加类名 可以很方便的找到自己想要修改的样式。lees中用到 /deep/ 加类名。scss中用到::v-deep 加类名。
less 穿透子组件、孙组件样式
最新发布
m0_37616866的博客
03-18 1018
总结： 再less中， 一个/deep/ 表示一层穿透，如果有多个组件嵌套，使用不同个数的/deep/ 实现样式重构的效果。
深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞
热门推荐
千里之行，始于足下！
01-26 1万+
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。 去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录 1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式 <style lang="css" s.
css less scss 修改第三方组件 深度选择器
weixin_54397440的博客
12-25 533
scss: ::v-deep +浏览器f12复制过来的类名 或者 ::v-deep( 浏览器f12复制过来的类名)less: /deep/ + 浏览器f12复制过来的类名。css : >>> + 浏览器f12复制过来的类名。
vue3中less、sass最新的深度选择器 deep()
qq_34070719的博客
03-02 1万+
vue3中深度选择器/deep/ >>> ::v-deep 已经废弃，请使用最新的深度选择器 deep() 今天在写vue3项目的时候，有个元素需要使用到深度选择器，于是还是像以前一样使用了 /deep/ .el-button{ width:80%; } 没想到控制台提示 我尝试了第二种深度选择器 ::v-deep 能选中 还是提示deep() 最后尝试了:deep()果然不提示了,而且也选中了 :deep( .el
深度选择器修改element-plus组件样式
04-02
要修改element-plus组件样式，您可以使用深度选择器。深度选择器是指在样式选择器前加上“/deep/”或“::v-deep”来强制样式穿透到子组件中，并修改其样式。 例如，如果您想要修改el-input组件的输入框边框颜色，则可以使用以下深度选择器： ```css /deep/ .el-input__inner { border-color: red; } ``` 或者： ```css ::v-deep .el-input__inner { border-color: red; } ``` 这将修改所有el-input组件的输入框边框颜色为红色。 请注意，深度选择器可能会导致样式被其他组件继承或覆盖。为了避免这种情况，您可以使用scoped样式或修改全局样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值