css,less,scss中的深度选择器，结合elementUi使用

最新推荐文章于 2024-07-14 22:50:12 发布
最新推荐文章于 2024-07-14 22:50:12 发布
阅读量1.4k 收藏 1
点赞数 1
文章标签： css less scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujia20010827/article/details/131600590
版权
CSS深度选择器如>>>在某些场景下帮助精确选择嵌套元素，而SCSS提供了::v-deep来穿透作用域。/deep/在旧版的AngularCSS中用于相同目的，但已被弃用。这些选择器方法是优化组件样式和避免样式冲突的有效工具。
摘要由CSDN通过智能技术生成

css中深度选择器用到的是 >>>加类名 可以很方便的找到自己想要修改的样式

 lees中用到 /deep/ 加类名

 

scss中用到::v-deep 加类名

 

 

杰伦fans
关注
深度选择器
YoungMan_09的博客
04-22 3706
深度选择器的妙用
Css、less和Sass（SCSS）
wolfcode_cn的博客
12-04 1400
本文为叩丁狼高级讲师原创文章，转载请注明出处。 背景 CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是队友一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前...
CSS深度选择器(穿透)
cs007711的博客
02-24 1971
问题：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)CSS深度选择器(穿透)1、stylus的样式穿透 使用>>>（不推荐）
【SASS/SCSS（一）】选择器
最新发布
weixin_57208584的博客
07-14 630
Sass 是一门高于 CSS 的，它能用来清晰地、结构化地描述文件样式。而SCSS是SASS引入的，是CSS的超集，所以所有CSS有效的使用在SCSS中都生效。
关于SCSS中使用深度选择器
六耳石猴的博客
07-27 7013
最近 开发过程中遇到一个问题，当对element-ui的样式进行覆写时，由于样式优先级关系导致自己写的样式"padding: 0"无法覆盖element的组件样式。 在SCSS中使用::v-deep的话虽然样式覆写可以成功，但是该类内部的字标签类样式会失效。 .class1{ ::v-deep .class2{ p{} } } 如上，class2的 样式可以覆写，但是内部的p标签选择器的样式会失效。解决方案是可以把class2的覆写单独提炼出来再加上深度选择器。 .class1{ .class2
css 深度选择器（穿透选择器）
XH1234234的博客
10-20 1650
引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式样式文件中使用了 scoped 属性，但是为了每个组件之间不相互影响所以不能去除scoped 属性，此时需要用样式穿透选择器来修改第三方组件的样式，以下罗列了三种方法。适用与 css、stylus，不太推荐，可能会有问题。适用于 scss、less。
CSS深度(穿透)选择器
weixin_57677300的博客
08-09 5851
CSS深度(穿透)选择器
Less和Scss
m0_68702564的博客
07-31 984
less和scss的基本介绍
CSS子元素选择器使用介绍
09-25
在CSS选择器中，子结合符“>”用于定义子元素选择器。当子结合符被放置在两个CSS选择器之间时，它表示仅选择第一个选择器指定元素的直接子元素，而这些子元素必须匹配第二个选择器指定的元素。例如，如果我们有一个...
css样式穿透（深度选择器）
m0_67401660的博客
08-01 866
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。有时会发现使用了以上方法修改element组件样式还是会不生效，适用与css、stylus，不太推荐，可能会有问题。...
【Vue项目笔记心得】深度选择器
qiaoyangla的博客
07-13 2157
对于某一个组件，如果style添加上scoped属性，给当前子组件的结构中都添加上一个data-v-xxxx自定的属性。 vue是通过属性选择器给需要添加的元素加上样式。scoped作用：只对当前的组件有用（样式） 在父组件中再添加一个子组件，子组件的根标签，会拥有父组件当中的自定义属性。 注意下面只有div标签有data-v-7ba5b90属性： 如果 子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。这里h3也就相当于根标签了，也具有父组件的data-v-7ba5b90属性：
CSS深度穿透选择器（＞＞＞,/deep/,::v-deep）
qq_34082921的博客
01-31 1279
1.操作符 >>> 可能会因为无法编译而报错2.dart-sass不支持/deep/与>>>写法3. vue3.0 中使用 /deep/ 会报错4.对于使用了 css 预处理器（scss 、sass、 less）时，深度选择器 ::v-deep 更通用。
scss中深度选择器如何使用
2401_83036723的博客
02-29 3879
以上两种方式正常情况下使用都没有问题，但在scss，less，sass等解析器中，>>>，/deep/可能都无法使用，这种情况可以采用 ::v-deep。在开发过程中，可能会遇到scss中样式不会执行，这时候我们就会用到深度选择器 /deep/在/deep/ 使用以上写法编译时，出现报错或者警告可以使用 ::v-deep。通常情况下，写样式穿透都是用 >>> ，或者 /deep/
css深度选择器deep
热门推荐
qq_38806666的博客
12-18 1万+
css深度选择器deep
css预处理文件使用scss嵌套写法深度选择器deep失效问题
m0_48521482的博客
03-29 2096
vue3 + vite + elementPlus项目，css预处理文件使用scss嵌套写法导致深度选择器deep失效
前端：css less语法 /deep/ 深度影响的用法
classic0608的博客
05-15 5633
如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 /deep/ 了。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。css中通常会在 style 标签内添加。除了 /deep/ 以外，也可以实现同样的效果。
CSS之深入选择器
一风
04-25 302
一、选择器在浏览器的解析原理选择器是从右往左进行解析二、选择器的解析速度id选择器>class选择器>元素选择器>相邻选择器>子选择器>后代选择器>通配符选择器>属性选择器>伪类选择器三、优化方法1、不要使用通配符2、不要在id选择器和class选择器前添加元素名3、选择器尽量不要超过三层，右侧选择器尽量精确4、少用后代选择器和子选择器解释：这些优化...
css深度选择器 /deep/
zhou_xiaozhou的博客
01-10 4551
css深度选择器 /deep/
css less scss 修改第三方组件 深度选择器
weixin_54397440的博客
12-25 543
scss: ::v-deep +浏览器f12复制过来的类名 或者 ::v-deep( 浏览器f12复制过来的类名)less: /deep/ + 浏览器f12复制过来的类名。css : >>> + 浏览器f12复制过来的类名。
css中使用>>>作深作用选择器：
09-04
在CSS中，使用>>>（或者/深度选择器）作为深度作用选择器，可以修改具有scoped属性的组件的样式。这种选择器只在CSS中生效，如果使用Sass或Less等预处理器，可能会无法识别。此时可以使用::v-deep选择器来替代/deep/选择器。使用::v-deep选择器的方法如下： ```html <style lang="scss" scoped> .a { ::v-deep .b { color: red; } } </style> ``` 或者使用以下方法： ```html <style lang="scss" scoped> .a ::v-deep .b { color: red; } </style> ``` 这样可以实现对组件内部的样式修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [样式不生效？试试css深度作用选择器：＞＞＞ 、/deep/ 、::v-deep样式穿透的使用方法和区别](https://blog.csdn.net/qq_22182989/article/details/124358960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [css里的＞＞＞ /deep/深度作用选择器](https://blog.csdn.net/qq_40409143/article/details/115739498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值