選擇行高光不工作，同時使用交替行背景格式

Question

我只是想在我的網格，我通過淘汰賽使用美容更改。 以下是我的代碼：

HTML：

<table class="table table-bordered"> 
<tbody data-bind="foreach: frameworks"> 
    <tr class="rowStyle" data-bind="css: {'selected':$root.selectedItem() == $data , alt: $index() % 2}"> 
     <td> 
      <button class=btn data-bind="click: $parent.doStuff">A</button> 
     </td> 
     <td data-bind="text: $data"></td> 
    </tr> 
</tbody> 

CSS：

.selected 
{ 
background-color:red; 
} 
.alt { 
     background-color: #DBE6F0; 
    } 
.rowStyle:hover { 
      background: #FFA500; 
     } 

視圖模型：

var App = new function() { 
    var self = this; 
    self.frameworks = ko.observableArray(); 
    self.selectedItem = ko.observable(null); 
    self.doStuff = function (item) { 
     self.selectedItem(item); 
     //how to change table row color? 
    }; 
}; 

App.frameworks.push('bootstrap'); 
App.frameworks.push('knockout.js'); 
App.frameworks.push('knockout.js1'); 
App.frameworks.push('knockout.js2'); 
App.frameworks.push('knockout.js3'); 
ko.applyBindings(App); 

JSFiddle 在上面的代碼中，當我選擇第一行，然後用紅色突出顯示它好，它和我想要的一樣。

問題：

當我選擇第二行則它沒有顯示所選的顏色。所選行在不同的行上工作。 我如何解決這個與我使用的所有樣式？

Answer 1

它看起來像一個繼承問題。交替的行顏色阻止.selected顯示這意味着您必須給.selected更多的權限比.alt。您可以鏈接它們或對它們進行重新排序，CSS級聯使底部的聲明優先於頂部，其中一些特殊的規則/情況可以稍微改變。

.selected.alt {... 

或更改順序

.alt { 
    background-color: #DBE6F0; 
} 
.rowStyle:hover { 
    background: #FFA500; 
} 
.selected 
{ 
    background-color:red; 
} 

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/