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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
阿蒙Amon9 分钟前
C#常用类库-详解JetBrains.Annotations
前端·数据库·c#
lichenyang45327 分钟前
Next.js 初学者核心知识点
前端
张一凡9328 分钟前
easy-model 在数据可视化仪表板中的应用
前端·react.js
学以智用29 分钟前
# Vue3 AJAX 请求数据
前端·vue.js
VillenK29 分钟前
@vue-office依赖报错
前端·npm
兆子龙29 分钟前
TypeScript 模板字面量类型高级用法
前端
miss30 分钟前
龙虾帮你如何配置自己的技能之前端周报生成
前端
JuliusDeng31 分钟前
Windows 前端环境进化论:告别 nvm,拥抱 Rust 编写的 fnm!
前端
miss31 分钟前
JavaScript 异步循环完全指南:从踩坑到最佳实践
前端