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

余子桃2024-08-21 15:39

一、原样式：

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

二、深度穿透修改原样式

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

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

复制代码

:deep(.el-icon svg) {
  display: none;
}

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