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特異性。 一種方法是添加一個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之前，它就會開始工作。