我会提前说 CSS 是我的弱点。我有一个使用以下 ng-repeat 语句创建的 angularJs 表：
<table id="lineItemsTable"
class="table table-bordered table-hover table-list scroll">
<thead>
<tr>
<th>@Labels.itemId</th>
<th>@Labels.nickname</th>
<th>@Labels.description</th>
<th class="text-right">@Labels.quantity</th>
<th ng-if="crud.model.adjType>=0">@Labels.location</th>
<th ng-if="crud.model.adjType<0">@Labels.cost</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="result in crud.model.lineItems track by $index"
ng-form="lineItemForm"
ng-click="crud.selectedMatrixIndex=-1;crud.selectedIndex=$index;"
ng-class="{selected: $index === crud.selectedIndex}">因此，我的网格（表格）中的选定行使用此 css 类以蓝色突出显示：
.table-list > tbody > tr.selected td {
background: rgba(204, 229, 255, 1);
}此外，在同一个表中，我使用以下 HTML 创建了禁用成本：
<td>
<input type="number" name="cost"
ng-if="crud.model.adjType<0"
ng-model="result.unitCost"
data-sm:number-format
data-accuracy="2"
data-sm:number
ng-disabled="true"
ng-class="{'smYellow' : (result.unitCost>0 && result.costOverride === true), 'smOrange': result.unitCost===0 }"
class="form-control form-control-sm text-right">
</td>其中 smYellow 类如下：
.smYellow {
fill: #faf37e;
fill-opacity: 0.4;
stroke: #faf37e;
stroke-width: 3;
background-color: rgba(250,243,126, 0.40) !important;
}我在这里遇到的问题是当行没有突出显示时，我的黄色看起来很好。但是，当该行突出显示时，我会看到绿色（蓝色 + 黄色）。我想知道这个问题是否有 CSS 技巧或一些聪明的解决方案，所以当行突出显示与否（或者，至少，比绿色更黄）时，我的颜色看起来相同。
我会很感激任何想法。
更新。尝试了建议的想法，但仍然看到绿色 - 我做错了什么？
.smOrange {
fill: #F58025;
fill-opacity: 0.4;
stroke: #F58025;
stroke-width: 3;
background-color: rgba(245, 128, 37, 0.40) !important;
}
.smYellow {
fill: #faf37e;
fill-opacity: 0.4;
stroke: #faf37e;
stroke-width: 3;
background-color: rgba(250,243,126, 0.40) !important;
}
.table-list > tbody > tr.selected td > input.smYellow {
background-color: rgba(250,243,126, 1);
fill-opacity: 1;
}
.table-list > tbody > tr.selected td > input.smOrange {
background-color: rgba(245, 128, 37, 1);
fill-opacity: 1;
}选择行时看到绿色的原因是因为您将输入的背景设置为 40% 不透明度（alpha）并且蓝色背景正在渗出：
.smYellow {
background-color: rgba(250,243,126, 0.40); // R,G,B,alpha
}
由于蓝色 + 黄色 = 绿色，因此您看到的是绿色。将不透明度（alpha）设置为 100%，无论选择什么，您都应该看到输入的纯黄色：
.smYellow {
background-color: rgba(250,243,126, 1); // R,G,B,alpha
}
或者，您可以制定另一个更具体的规则，让您在选择行时设置不同的颜色：
.table-list > tbody > tr.selected td > input.smYellow{
background-color: rgba(250,243,126, 0.4); // put your new matching color here
}
这将要求您!important从smYellow规则中删除该语句。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句