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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
小飞大王6662 分钟前
JavaScript基础知识总结(四):常见内置构造函数,正则表达式,作用域与闭包
前端·javascript·正则表达式
3秒一个大4 分钟前
Ajax 数据请求详解:从概念到实战
javascript
清凉夏日21 分钟前
Flutter 国际化完整指南
前端·flutter
Jony_29 分钟前
动态代理机制
前端
掘金一周35 分钟前
重新思考 weapp-tailwindcss 的未来 | 掘金一周 11.13
前端·人工智能·后端
Pu_Nine_936 分钟前
Vue 3 项目 ESLint 配置详解:初始模板的正确配置
前端·javascript·vue.js
Jolyne_39 分钟前
【浏览器插件】一键下载页面图片和文本
前端
Jony_43 分钟前
Android 类加载机制
前端·客户端
im_AMBER1 小时前
HTTP概述 01
javascript·网络·笔记·网络协议·学习·http
1024小神1 小时前
在 Swift 中,参数标签(argument label),用于在调用函数时提高代码的可读性。
前端