tablesorter不显示向上和向下箭头

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

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

谢谢

Answer 1

您遇到的问题是由于css 特异性造成的（试试这个计算器）：

默认的蓝色主题使用：

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

因此，为了覆盖这一点，您需要更高的 css 特异性。一种方法是将 a 添加th到排序类​​：

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