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 specificity（试用this calculator）：

默认的蓝色主题使用：

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

所以，为了覆盖它，你需要更高的css特异性。一种方法是在排序类中添加th：

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

Answer 2

这是由于css偏好规则。始终应用上次匹配的规则。为了克服这种情况，你可以随时使用！important修饰符，就像你的情况一样

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

或

你只需将.header css放在.headerSortDown和.headerSortUp之前，它就会开始工作。

tablesorter不显示向上和向下箭头

2 个答案: