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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
余人于RenYu28 分钟前
Claude + Figma MCP
前端·ui·ai·figma
杨艺韬3 小时前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农4 小时前
外卖餐具智能推荐
linux·服务器·前端
2401_885885044 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢02114 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha5 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌5 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊5 小时前
原生form发起表单干了啥
前端
剪刀石头布啊5 小时前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静6 小时前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程