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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
@菜菜_达3 分钟前
前端防范 XSS(跨站脚本攻击)
前端·xss
Rysxt_7 分钟前
Vue 3 项目核心:main.ts 文件的作用与配置详解
前端·javascript·vue.js
就叫飞六吧11 分钟前
基于spring web实现简单分片上传demo
java·前端·spring
AAA阿giao17 分钟前
拼乐高式开发:深入剖析 React 组件通信、弹窗设计与样式管理
开发语言·前端·javascript·react.js·前端框架·props·components
lvbinemail20 分钟前
svn的web管理后台服务svnWebUI
运维·前端·svn·jar
Violet_YSWY21 分钟前
Promise 讲解
前端
软件开发技术深度爱好者22 分钟前
数学公式生成器HTML版
前端·html
Marshmallowc29 分钟前
CSS 布局原理:为何“负边距”是栅格系统的基石?
前端·css·面试
Rysxt_31 分钟前
Vue 3 项目核心:App.vue 文件的作用与配置详解
前端·javascript·vue.js
洛阳纸贵38 分钟前
JAVA高级工程师--Maven父子关系专题
java·前端·maven