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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
sorryhc11 分钟前
Vite开发环境按需编译是怎么实现的?
前端·javascript·vite
nnnnna28 分钟前
props 、emits 、组件上的v-model(详细版)
前端·javascript
三年三月31 分钟前
Tailwind CSS 入门介绍
前端
余生H37 分钟前
前端技术新闻(WTN-1):React.js & Next.js 爆出 CVSS 10.0 级严重漏洞,历史风险回顾与代码级深度分析
前端·javascript·react.js
1024肥宅41 分钟前
JavaScript 原生方法实现:数学与数字处理全解析
前端·javascript·ecmascript 6
烟袅1 小时前
深入理解 JavaScript 内存机制与闭包原理
前端·javascript
烟袅1 小时前
JavaScript 内存三空间协同机制:代码空间、栈空间与堆空间如何联合运行
前端·javascript
lqj_本人1 小时前
DevUI高频组件(Form 组件)深度用法与避坑指南
前端·javascript
live丶1 小时前
从零实现一个低代码 H5 页面编辑器(Vue3 + 拖拽)
前端·vue.js
黑臂麒麟1 小时前
华为云 DevUI初体验:如何快速入门项目搭建
前端·ui·华为云·devui