表格排序插件没有显示上下箭头

Question

我正在尝试使用JQuery tablesoter插件，但是当我按降序或升序排序时，它不会显示向下或向上箭头。它总是显示向上和向下箭头（未排序的箭头）。似乎table.tablesorter .header {...} 覆盖了table.tablesorter .headerSortUp {...} 和 table.tablesorter .headerSortDown{...} 样式。以下是我的代码：

CSS

table.tablesorter .headerSortUp {
    background-image: url('../images/icons/asc.gif');
    background-repeat: no-repeat;
    background-position: center right;
}
table.tablesorter .headerSortDown {
    background-image: url('../images/icons/desc.gif');
    background-repeat: no-repeat;
    background-position: center right;
}
table.tablesorter .header {
    cursor: pointer;
    background-image: url('../images/icons/bg.gif');
    background-repeat: no-repeat;
    background-position: center right;
}

我的表格在一个速度模板中，但我不认为这会影响这个问题。

<table id="harvestTable" class="tablesorter" border="1">
      <thead>
      <tr>
        <th>Source</th>
        <th>Time</th>
      </tr>
      </thead>
      <tbody>
      #foreach($item in $self.harvestlist)
        #set($harvestId = $item.getFirst('harvestId'))
...

我已将相关图标放在各自的文件夹中。我正在使用Chrome浏览器，并在Firefox上进行了测试，但两者都无法正常工作。当我在Chrome中检查元素时，我发现.header的图像已经覆盖了.headerSortUp和.headerSortDown的图像。如果我取消选择.header的图像，.headerSortUp的图像将被正确显示。

我错过了什么吗？我非常感谢有价值的回复。

谢谢

- lloydh

Answer 1

你遇到的问题是由于 CSS 优先级 导致的（请尝试使用此计算器）：

默认的蓝色主题使用：

table.tablesorter thead tr .headerSortUp {} // (0,0,2,3)

所以，为了覆盖此样式，您需要更高的CSS特异性。一种方法是将 th 添加到排序类中：

table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4)

- Mottie

---

我之前不知道 CSS 优先级，现在既解决了我的问题，也学到了重要的知识。非常感谢您的回复！ - lloydh

提醒一下，对于现在找到此处的任何人，tablesor类名已更改，例如 table.tablesorter thead tr th.tablesorter-headerAsc 和 table.tablesorter thead tr th.tablesorter-headerDesc。 - John Hascall

实际上，我的tablesorter分支使用tablesorter-headerAsc和tablesorter-headerDesc。原始的tablesorter使用headerSortUp和headerSortDown。 - Mottie

Answer 2

这是由于CSS优先级规则所致。最后匹配的规则总是被应用。为了克服这种情况，您可以始终使用!important修饰符，就像在您的情况下一样。

table.tablesorter .headerSortDown {
 background-image: url('../images/icons/desc.gif') !important;

或者

您只需将 .header css 放在 .headerSortDown 和 .headerSortUp 之前，它就可以开始工作了。

- maximus ツ