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

Question

我注意到如果你定义一个 <style>在您的标记中添加标记，如下所示:

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

然后您尝试使用 knockout 应用 css 绑定(bind)(这会在您单击一行时设置背景色):

<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.

您可以阅读更多有关 selector's specificity calculated 的信息