element的el-transfer穿梭框很好用,但是总有满足不了业务的需求的时候,比如要修改el-transfer穿梭框的默认按钮颜色,如下图
一般看到这样的需求,我首先会去element的官网看看这个el-transfer穿梭框有没有提供相应的参数来实现,结果去看一下发现没有,只有可以自定义按钮文案,却没有自定义按钮的颜色或样式。怎么办?只好自己去研究默认按钮颜色的css和html是怎么写,然后自己写css进行覆盖默认的样式。
经过我的研究,发现俩个按钮ccs和html一模一样,但是我只需要修改第一个按钮的颜色。所以想到用css的:nth-of-type(n)选择器,这个选择器可以匹配属于父元素的特定类型的第 N 个子元素的每个元素。也就是我可以用:nth-of-type(1)选到第一个按钮,然后可以写css样式改变颜色,具体代码如下:
.el-transfer__button:nth-of-type(1).el-button--primary {
// 写你覆盖样式
}
最终代码如下:
//初始样式
.el-transfer__button:nth-of-type(1).el-button--primary{