排序列的 CSS 不适用于斑马条纹数据表

Question

在这里查看 fiddle :http://jsfiddle.net/7QtSS/

当使用 Firefox 的检查器检查第一个单元格(左上角，标题下方)应用了哪些样式时，它使用 demo_tables[368] 中的 tr.odd td.sorting_1 样式，它是在 inline[23] 中被 `tr.odd td.dc1´ 的样式覆盖。

我期待来自 inline[8] 的 tr.odd td.dc1 td.sorting_1 的更具体的样式会被应用，但它不是——即使改变这些样式的顺序(如在这个 fiddle 中:http://jsfiddle.net/7rezt/1/)-那么我的错在哪里，我怎样才能为排序的列分配不同的颜色？

Answer 1

您的问题是 CSS 语法不正确。 tr.odd td.dc1 td.sorting_1 表示

为 sorting_1 设置 background-color，当 sorting_1 是 dc1 和 dc1 的 child 时 是 odd 的 child 。

您可能希望同时将 td.dc1 和 td.sorting_1 设置为 background-color: #e55c5c; 当它们是 tr.odd 的 child 时:

tr.odd td.dc1, tr.odd td.sorting_1 {
  background-color: #e55c5c;
}

---

整个 CSS :

tr.odd td.dc1, tr.odd td.sorting_1 {
  background-color: #e55c5c;
}
tr.even td.dc1, tr.even td.sorting_1 {
    background-color: #f05b5b;
}
tr.odd td.dc1 {
    background-color: #e86e6e;
}
tr.even td.dc1 {
    background-color: #f37878;
}
tr.odd td.dc1, tr.odd td.sorting_1 {
    background-color: #e55c5c;
}
tr.even td.dc1, tr.even td.sorting_1 {
    background-color: #f05b5b;
}

fork fiddle -> http://jsfiddle.net/H95TC/