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;
        }

ViewModel：

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/

使用备用行背景格式

1 个答案: