jquery – tablesorter不显示向上和向下箭头

我正在尝试使用 JQuery tablesoter插件但是当它显示箭头时,当我按降序或升序排序时,它不会显示向下或向上箭头.它始终显示向上和向下箭头(未分类的箭头).似乎table.tablesorter .header {…}会覆盖table.tablesorter .headerSortUp {…}和table.tablesorter .headerSortDown {…}样式.以下是我的代码：

CSS

table.tablesorter .headerSortUp {
    @R_801_11442@kground-image: url('../images/icons/asc.gif');
    @R_801_11442@kground-repeat: no-repeat;
    @R_801_11442@kground-position: center right;
}
table.tablesorter .headerSortDown {
    @R_801_11442@kground-image: url('../images/icons/desc.gif');
    @R_801_11442@kground-repeat: no-repeat;
    @R_801_11442@kground-position: center right;
}
table.tablesorter .header {
    cursor: pointer;
    @R_801_11442@kground-image: url('../images/icons/bg.gif');
    @R_801_11442@kground-repeat: no-repeat;
    @R_801_11442@kground-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图像.

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

谢谢

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

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