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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
spmcor18 分钟前
MinIO本地对象存储部署指南
前端
少年纪22 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin23 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍26 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月26 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00727 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom28 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
东坡白菜29 分钟前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
Alan5215930 分钟前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin40 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript