当前位置: 首页 > news >正文

vue3使用elementui-plus时使用深度选择器穿透影响原样式

一、原样式:

下拉框选择时,右边存在一个下拉的箭头符号,那么在许多场景下我们不需要显示,这个时候就可以通过开发者工具进行定位,选中该元素,可以看到,影响的样式是:.el-icon svg

二、深度穿透修改原样式

我们修改原样式,增加 display:none即可不显示该符号,此时有两种方案,一种是取消style里面的scoped属性,这样会影响全局样式,导致所有的下拉框都没有这个符号了,这并不是我想要的,所以由此引入了第二种方案:

使用深度选择器进行样式穿透,这样既可以修改当前页面的样式,又不影响其他页面,在本例中,增加如下样式即可:

:deep(.el-icon svg) {display: none;
}

 使用 :deep() 深度选择器进行对原样式的修改!

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • keepalived详解
  • Spring Mybatis拦截器配合logback打印完整sql语句
  • 嵌入式AI快速入门课程-K510篇 (第七篇 系统BSP开发)
  • GO语言如何抗住火影忍者手游的高并发
  • 入门网络安全工程师要学习哪些内容
  • 国自然放榜在即!用这种方法或可抢先查询...
  • 全新分支版本!微软推出Windows 11 Canary Build 27686版
  • ThreeJs学习笔记--坐标系,光源,相机控件
  • C/C++实现蓝屏2.0
  • Linux进程间通信——软件实现临界区互斥的基本方法
  • 高性能web服务器3——Nginx编译安装
  • Spring MVC Controller返回json日期格式配置失效的解决办法
  • CUDA编程07 - 卷积的优化
  • TikTok达人营销与品牌建设:长期视角下的策略布局
  • Zookeeper服务注册及心跳机制详解
  • 【React系列】如何构建React应用程序
  • 【个人向】《HTTP图解》阅后小结
  • CAP 一致性协议及应用解析
  • crontab执行失败的多种原因
  • CSS中外联样式表代表的含义
  • E-HPC支持多队列管理和自动伸缩
  • ERLANG 网工修炼笔记 ---- UDP
  • ES6之路之模块详解
  • JavaScript 是如何工作的:WebRTC 和对等网络的机制!
  • js对象的深浅拷贝
  • Js实现点击查看全文(类似今日头条、知乎日报效果)
  • MaxCompute访问TableStore(OTS) 数据
  • MobX
  • MySQL的数据类型
  • SpiderData 2019年2月23日 DApp数据排行榜
  • Vim Clutch | 面向脚踏板编程……
  • webpack+react项目初体验——记录我的webpack环境配置
  • 聊聊redis的数据结构的应用
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 使用 Docker 部署 Spring Boot项目
  • 使用Gradle第一次构建Java程序
  • 一天一个设计模式之JS实现——适配器模式
  • 用 Swift 编写面向协议的视图
  • 栈实现走出迷宫(C++)
  • 做一名精致的JavaScripter 01:JavaScript简介
  • Java总结 - String - 这篇请使劲喷我
  • MPAndroidChart 教程:Y轴 YAxis
  • 数据可视化之下发图实践
  • ​Z时代时尚SUV新宠:起亚赛图斯值不值得年轻人买?
  • ​如何使用ArcGIS Pro制作渐变河流效果
  • $分析了六十多年间100万字的政府工作报告,我看到了这样的变迁
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (C++)八皇后问题
  • (poj1.3.2)1791(构造法模拟)
  • (二)什么是Vite——Vite 和 Webpack 区别(冷启动)
  • (过滤器)Filter和(监听器)listener
  • (剑指Offer)面试题34:丑数
  • (每日一问)设计模式:设计模式的原则与分类——如何提升代码质量?
  • (篇九)MySQL常用内置函数
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)