Angular 1中如何根据标签修改指定md-tab的背景色

针对你遇到的问题——需要根据label而非位置来指定md-tab的背景色，这里有两种可靠的解决方案，适配不同的场景：

方法一：纯CSS属性选择器（适合固定Label的场景） #

AngularJS Material渲染md-tab时，会保留你在指令上设置的label属性到DOM元素中。我们可以利用CSS属性选择器直接定位到对应标签，再设置内部标签按钮的背景色：

示例代码： #

/* 针对Label为"Followup"的tab设置背景色 */
md-tab[label="Followup"] .md-tab {
  background-color: #4CAF50; /* 绿色 */
}

/* 针对Label为"Symptoms"的tab设置背景色 */
md-tab[label="Symptoms"] .md-tab {
  background-color: #2196F3; /* 蓝色 */
}

/* 可选：区分激活/未激活状态 */
md-tab[label="Followup"] .md-tab.md-active {
  background-color: #388E3C; /* 深绿色（激活时） */
}

这种方法不需要修改JS代码，适合标签文本固定不变的情况，而且不受tab顺序变化的影响。

方法二：AngularJS动态类绑定（适合动态Label或复杂场景） #

如果你的tab label是动态生成的，或者需要更灵活的样式控制，可以通过ng-class给目标tab绑定自定义类，再通过CSS设置样式：

步骤1：在模板中添加ng-class #

<md-tab id="tab1" label="Followup" 
        ng-class="{'followup-tab': true}" 
        ui-sref="app.ccc-patientDetails.followup">
  <div ui-view="followup"></div>
</md-tab>

<md-tab id="tab2" label="Symptoms" 
        ng-class="{'symptoms-tab': true}" 
        ui-sref="app.ccc-patientDetails.symptoms">
  <div ui-view="symptoms"></div>
</md-tab>

如果label是从scope变量获取的（比如label="{{tab.label}}"），可以改成动态判断：

<md-tab ng-repeat="tab in tabs" 
        label="{{tab.label}}"
        ng-class="getTabClass(tab.label)"
        ui-sref="{{tab.sref}}">
  <div ui-view="{{tab.view}}"></div>
</md-tab>

步骤2：在Controller中定义类判断函数（动态场景） #

angular.module('yourApp').controller('YourController', function($scope) {
  $scope.getTabClass = function(label) {
    switch(label) {
      case 'Followup':
        return 'followup-tab';
      case 'Symptoms':
        return 'symptoms-tab';
      default:
        return '';
    }
  };
});

步骤3：编写对应CSS #

.followup-tab .md-tab {
  background-color: #4CAF50;
}
.symptoms-tab .md-tab {
  background-color: #2196F3;
}

/* 激活状态样式 */
.followup-tab .md-tab.md-active {
  background-color: #388E3C;
}

这种方法扩展性更强，哪怕后续tab顺序或数量变化，只要label不变，样式就会正确应用。

为什么之前的:first-child方法不适用？ #

:first-child是基于DOM位置的选择器，一旦tab的顺序调整，原来的样式就会错位。而基于label的方法直接关联标签文本，不管tab的位置如何变化，都能精准定位目标tab。

内容的提问来源于stack exchange，提问作者sachin.g