ion-tab-button{
font-size: 10px;
--background-focused: #a0a;
--color-selected: #a0a;
--padding-end: 0px;
--padding-start: 10px;
--padding-bottom: 0px;
--margin-left:0px;
--margin-right:0px;
max-width:100px;
ion-icon{
    font-size: 67.5px;
}}

这是正确的离子方式

如果你想在一个类处于活动状态时给予它另一种颜色，你可以简单地做以下事情：

.class:active {
    color: blue; 
}

但是，在您的情况下，这将是：

ion-tab-button:active{
    color: blue;
}

颜色属性也适用于十六进制和RGB代码（更多信息请参见https://www.w3schools.com/cssref/css_colors_legal.asp）
我也reccomend检查这篇文章，因为这是有关的问题，你有在目前。Editing Ionic tab icon styles

这是下面的CSS，如果我们只需要将样式应用于特定页面，我们需要将其添加到组件级CSS中。
使用focus伪类，我们可以将样式应用到选中的离子标签按钮上

ion-tab-button:focus {
    ion-icon, ion-label {
        color: var(--ion-color-primary) !important;
        --ion-color-base: var(--ion-color-primary) !important;
    }
}

这比它应该的要难得多，但这对我来说是有效的：

In theme/variables.css

:root {

  /*put at the bottom after all other base styles*/
  --ion-tab-bar-color: #2a3042;
  --ion-tab-bar-color-selected: #556ee6;

}

您可以提供自定义CSS到选定的选项卡。每当您选择选项卡时，“选项卡选择”类将添加到离子选项卡按钮中。

.tab-selected {
  border-bottom: 5px solid blue;
}

在ionic中还有一种自定义选项卡的方法。（我的离子版本6.12.0）

ion-tab-bar{
    background-color: white;
    overflow-x: auto;
    border:0px;
}

ion-tab-bar > ion-tab-button {
 
  border-radius: 20px 20px 20px 20px;
}

ion-tab-button[aria-selected=true] {
    color:white;
    background-color: #3689ef;
 }

 
 ion-tab-bar  ion-tab-button[aria-selected=true]:first-child {   
    border-radius: 0px 20px 20px 0px;
 }
 ion-tab-bar  ion-tab-button[aria-selected=true]:last-child {
  
    border-radius: 20px 0px 0px 20px;
 }

我知道我迟到了四年，但我一直在寻找这个问题的答案，我花了一些时间才找到答案。唯一对我有效的是这个，所以我希望它能帮助到别人：

.tab-button[aria-selected="true"] {
  --background: white !important;
  background-color: white !important;

  .tab-icon {
    color: red !important;
  }

  .tab-label {
    color: red !important;
  }
}

tab-label是<ion-label>标签的类，tab-icon用于<ion-icon>，tab-button用于<ion-tab-button>
所有--color-selected的东西都只是在我点击按钮时改变涟漪的颜色，或者什么都不做。它在我的浏览器（Chrome）上工作，我也在我的手机（Android）上测试了它。
@离子/Angular 6.3.9