html - CSS 属性定义覆盖 Knockout js css 绑定

Question

我注意到，如果您在标记中定义<style>标签，如下所示：

 tr:nth-child(even) {background-color:#F4F4F4;}

然后您尝试使用敲除应用 css 绑定（这会在您单击一行时设置背景颜色）：

<tr data-bind="click: $parent.selectRow, css: {red:  $parent.seletedRow() == $data}">

第二个没有设置，因为我已经在 <style>标签中定义了背景颜色。

我需要用颜色标记偶数行，但是当您单击一行时，它的背景颜色必须由 css 类替换red。这是一个例子：

http://jsfiddle.net/q3Uuz/1/尝试单击第二行，您会注意到red该类未应用。

怎样才能做到这一点？

Answer 1

在这种情况下，无需使用!important;

比您更具体的选择器tr:nth-child(even)也解决了您的问题

因此，您可以编写如下内容：

tr:nth-child(even) { background-color:#F4F4F4; }

tr.red { background-color: red; }

演示JSFiddle。

您可以阅读有关如何计算选择器的特异性的更多信息

Answer 2

您可以在红色类中添加样式!important：background-color

.red {
    background-color: red !important;
}

这是工作小提琴：http: //jsfiddle.net/q3Uuz/2/