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

一、原样式:

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

二、深度穿透修改原样式

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

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

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

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

相关推荐
Jackson@ML14 分钟前
用ASP.NET创建一个Blazer Web应用程序
前端·asp.net·blazor
shepherd12632 分钟前
Vue-Vben-Admin 从入门到实战:后端开发的前端探索之旅
前端·javascript·vue.js
CircleMouse1 小时前
介绍几个axios接口请求顺序的问题
开发语言·前端·javascript·ecmascript
o***Z4482 小时前
React自然语言
前端·react.js·前端框架
J***Q2922 小时前
React部署方案详解
前端·react.js·前端框架
q***R3082 小时前
React组件性能分析
前端·react.js·前端框架
5***79002 小时前
React趋势
前端·react.js·前端框架
1***y1782 小时前
React路径
前端·react.js·前端框架
m***D2862 小时前
React生态系统
前端·react.js·前端框架
b***74882 小时前
React计算机
前端·react.js·前端框架