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

一、原样式:

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

二、深度穿透修改原样式

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

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

复制代码
:deep(.el-icon svg) {
  display: none;
}

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

相关推荐
try again!2 分钟前
rollup.js 和 webpack
开发语言·javascript·webpack
阿镇吃橙子3 分钟前
一些手写及业务场景处理问题汇总
前端·算法·面试
庸俗今天不摸鱼4 分钟前
【万字总结】前端全方位性能优化指南(九)——FSP(First Screen Paint)像素级分析、RUM+合成监控、Lighthouse CI
前端·性能优化
逆袭的小黄鸭4 分钟前
JavaScript:作用域与作用域链的底层逻辑
前端·javascript·面试
用户26124583401615 分钟前
vue2实现滚动条自动滚动
前端
FanetheDivine9 分钟前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js
前端Hardy9 分钟前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
傻球13 分钟前
Jotai 使用详解:React 轻量级状态管理库
前端·react.js
Linhieng13 分钟前
JS 解析 png 图片的分辨率(宽高)
javascript