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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
秋天爱美丽3 分钟前
css实现圆角+边框渐变+背景半透明
前端·css
jingfeng5147 分钟前
C++ STL-string类底层实现
前端·c++·算法
cyforkk41 分钟前
Hexo 双分支部署指南:从原理到 Netlify 实战
前端
小小愿望44 分钟前
前端读取与导出XLSX文件实战指南(React+Ant Design)
前端
小小愿望1 小时前
JavaScript生成随机数的全面指南:别再只会用Math.random()了!
前端
用户847181054191 小时前
wps加载项ribbon.js 与 ribbon.xml 的交互
前端
Jackson__1 小时前
RAG究竟是什么?一文搞懂大模型的记忆增强术
前端
雲墨款哥1 小时前
JS算法练习-Day10-判断单调数列
前端·javascript·算法
前端市界1 小时前
前端视角: PyQt6+Vue3 跨界开发实战
前端·qt·pyqt
阅文作家助手开发团队_山神1 小时前
第四章:Flutter自定义Engine本地依赖与打包流程
前端·flutter