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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
扶苏10022 分钟前
Vue 3 的组合式 API(Composition API)优势
前端·javascript·vue.js
万少17 分钟前
这可能是程序员离用AI赚钱最容易的一个机会了
前端·ai编程
范什么特西20 分钟前
狂神---死锁
java·前端·javascript
weixin1997010801624 分钟前
易贝(eBay)商品详情页前端性能优化实战
前端·性能优化
用户6000718191026 分钟前
【翻译】Rolldown 工作原理解析:符号关联、CJS/ESM 模块解析与导出分析
前端
想睡好28 分钟前
标签的ref属性
前端·javascript·html
扶苏100228 分钟前
Vue 3 新增内置组件详解与实战
前端·javascript·vue.js
henry1010101 小时前
HTML5小游戏 - 数字消除 · 合并2048
前端·游戏·html·html5
扶苏10022 小时前
详解Vue2和Vue3的变化
前端·javascript·vue.js
Hello eveybody2 小时前
如何将十进制转为二进制、八进制、十六进制?
前端·javascript·数据库