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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
xu_duo_i几秒前
vue2+elementUI后端返回二进制流,前端下载实现
前端·javascript·elementui
慧一居士1 分钟前
在Vue项目中平滑地引入HTML文件
前端·vue.js
我的20091 分钟前
HTML常用特殊字符
前端·html
开发者如是说14 分钟前
我用 Compose 写了一个 i18n 多语言管理工具
前端·后端·架构
微信api接口介绍21 分钟前
微信个人发消息api
运维·服务器·开发语言·前端·网络·微信·ipad
阿明Drift24 分钟前
从炫酷粒子星云学 Three.js:深度解析一个 15 万粒子的 GPU 动画系统
前端·three.js
凉_橙27 分钟前
移动端h5适配方案
前端
久亮哦27 分钟前
开发Electron程序
前端·javascript·electron
敲敲了个代码31 分钟前
为什么 Electron 项目推荐使用 Monorepo 架构 [特殊字符][特殊字符][特殊字符]
前端·javascript·学习·架构·electron·github
你们的前端课代表31 分钟前
前端如何优雅地“边聊边等”——用 Fetch 实现流式请求大模型
前端