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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
前端九哥16 小时前
装个依赖把公司电脑干报废了?npm i 到底背着我干了啥?
前端·javascript
溪海莘16 小时前
React入门:跟读官方快速入门教程(前端小白)
前端·react.js·前端框架
绝世唐门三哥16 小时前
工具函数-精准判断美东交易时间
前端·javascript·vue.js
Moment16 小时前
如何一次性生成 60 种语气表达?RWKV 模型告诉你答案 ❗❗❗
前端·后端·aigc
踢球的打工仔16 小时前
typescript-null和undefined
前端·javascript·typescript
前端小蜗16 小时前
对不起,我很贱:老板还没催,我自己就统计《GitLab年度代码报告》
前端·javascript·人工智能
佛系打工仔17 小时前
绘制K线第三章:拖拽功能实现
android·前端·ios
cauyyl17 小时前
react 项目检查国际化配置脚本
前端·react.js·前端框架
康一夏17 小时前
React面试题,useRef和普通变量的区别
前端·javascript·react.js
前端 贾公子17 小时前
Monorepo + Turbo (6)
前端