tablesorter不顯示向上和向下箭頭

我想使用JQuery tablesoter插件，但是當它顯示箭頭時，它不顯示向下或向上箭頭時，我排序降序或升序。它始終顯示向上和向下箭頭（未分類箭頭）。看來table.tablesorter .header {...}會覆蓋table.tablesorter .headerSortUp {...}和table.tablesorter .headerSortDown {...}樣式。下面是我的代碼：tablesorter不顯示向上和向下箭頭

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圖像。

我在這裏錯過了什麼嗎？我真的很感激有價值的迴應。

謝謝

來源

2013-04-02 lloydh

您所遇到的問題是由於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)

來源

2013-04-02 17:00:57 Mottie

我不知道css的特殊性，這解決了我的問題，也學到了一些重要的東西。非常感謝您的迴應！ – lloydh

這是由於css偏好規則。總是應用最後匹配的規則。要克服這種情況，你可以隨時使用！重要的修改，就像在你的情況

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

或

你只要把.header CSS .headerSortDown和.headerSortUp之前，它會開始工作。

來源

2013-04-02 10:18:59

非常感謝。我不知道這件事。一個非常有用的提示。 – lloydh

tablesorter不顯示向上和向下箭頭

回答

相關問題