前军教程网

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{
    color: #FFF;
    background-color: #f56c6c;
    border-color: #f56c6c;
}
//鼠标滑过和聚焦样式
.el-transfer__button:nth-of-type(1).el-button--primary:focus,
.el-transfer__button:nth-of-type(1).el-button--primary:hover{
   background: #f78989;
   border-color: #f78989;
   color: #FFF;
}
//禁用样式
.el-transfer__button:nth-of-type(1).el-button.is-disabled,
.el-transfer__button:nth-of-type(1).el-button.is-disabled:focus,
.el-transfer__button:nth-of-type(1).el-button.is-disabled:hover{
   color: #fff;
   background-color: #fab6b6;
   border-color: #fab6b6;
}