フォントの色を変更するには

Question

ng-repeatを使用して作成されたtableがあります。

ユーザーがテーブル行を選択すると、table行を強調表示して特定のクラスを適用することができます。

問題は、私はそのrowもハイライトされた行background-colorがblueあるとwhiteにテキストを変更しても、アイコンが青のままにしてアイコンを変更する問題を抱えています。 CSSの特異性の問題になる可能性があるため、

CSS

.selected{ 
    background-color:#004b89; 
    color:white; 
    font-weight:bold;  
} 

HTML

<tr ng-repeat="item in vm.items ng-class="{'selected':$index == vm.selectedRow}" class="table-striped" ng-click="vm.setClickedRow($index)"> 
<td><a tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i>  </a> 
<td><a tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a> 
</tr> 

Answer 1

は、あなたが色を変更したいfont-awesomeクラスを選択します。

.not-selected .fa-pencil { 
 
    color: red 
 
} 
 
.not-selected .fa-trash { 
 
    color: green 
 
} 
 
.selected { 
 
    background-color: #004b89; 
 
    color: white; 
 
    font-weight: bold; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<table> 
 
    <tr class="not-selected"> 
 
    <td><a tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i></a> 
 
     <td><a tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a> 
 
    </tr> 
 
    <tr class="selected"> 
 
    <td><a tooltip-placement="top"><i class="fa fa-pencil fa-2x link-icon"></i></a> 
 
     <td><a tooltip-placement="top"><i class="fa fa-trash fa-2x link-icon"></i></a> 
 
    </tr> 
 
</table>

Answer 2

iは下記たそのeasy.theコードはL =クールの種類や色magic.Useようにそれを変え続けるとMAAGIC Cである..

.fa 
{ 
    color:black; 

    animation: colorchange1 50s; 
    -webkit-animation: colorchange1 50s 
} 

@keyframes colorchange1 
{ 
0% {color: green;} 
15% {color: orange;} 
30% {color:purple;} 
45% {color: #e74c3c;} 
60% {color: violet;} 
75% {color: indigo;} 
90% {color: blue;} 
100% {color: black;} 
} 

@-webkit-keyframes colorchange1 /* Safari and Chrome - necessary duplicate */ 
{ 
    0% {color: green;} 
    15% {color: orange;} 
    30% {color:purple;} 
    45% {color: #e74c3c;} 
    60% {color: violet;} 
    75% {color: indigo;} 
    90% {color: blue;} 
    100% {color: black;} 
} 

は理解できることを願っています。