6

我正在尝试使用 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 图像。

我在这里错过了什么吗？我非常感谢您的宝贵回复。

谢谢

4

2 回答 2

3

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

默认的蓝色主题使用：

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

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

table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4)
于 2013-04-02T17:00:57.073 回答
2

这是由于 css 偏好规则。始终应用最后匹配的规则。为了克服这种情况，您始终可以使用 !important 修饰符，例如您的情况

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

或者

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

于 2013-04-02T10:18:59.453 回答