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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
sTone873754 分钟前
vscode 二开踩坑记录
前端
用户8168694747255 分钟前
Effect 执行时机与事件循环交错关系
前端·react.js
心在飞扬14 分钟前
langchain学习总结-OutputParser组件及使用技巧
前端·后端
llq_35016 分钟前
Ant Design v5 样式兼容性问题与解决方案
前端
triumph_passion17 分钟前
React Hook Form 状态下沉最佳实践
前端·react.js
心在飞扬18 分钟前
langchain学习总结-两个Runnable核心类的讲解与使用
前端·后端
德育处主任21 分钟前
在小程序做海报的话,Painter就很给力
前端·微信小程序·canvas
匠心码员21 分钟前
Git Commit 提交规范:让每一次提交都清晰可读
前端
CDwenhuohuo22 分钟前
uniapp去掉手机状态栏 全屏展示
开发语言·javascript·uni-app
骑斑马的李司凌22 分钟前
调试时卡半天?原来127.0.0.1和localhost的区别这么大!
前端